html - 增加屏幕宽度以显示响应式导航栏

Question

我正在尝试增加响应式导航栏在我的网站上启动时的屏幕宽度。我已经在 J​​SFiddle 中粘贴了导航栏的原始代码。

JSFiddle 链接:https://jsfiddle.net/zvumyx1e/#&togetherjs=V618c4byhE

因此，我在 CSS 代码中将媒体屏幕查询屏幕大小从最大宽度 767 更改为最大宽度 1024，以使响应式导航栏切换显示在平板电脑屏幕大小。原始代码如下，我所做的唯一更改是将值“767”更改为“1024”。完整代码位于 JSFiddle 的 css 部分。

@media (max-width: 767px) {

.shop_isle_banners_section .widget {
    width: 100%;
}
.navbar-toggle {
    display: table-cell;
    vertical-align: middle;
    float: none;
    width: 44px;
    cursor: pointer;
}
.navbar-header {
    display: table !important;
    width: 100%;
    min-height: 50px;
}
.shop_isle_header_title {
    margin-left: 0;
    display: table-cell !important;
    vertical-align: middle;
    float: none;
    text-align: left;
}

.navbar-fixed-top .navbar-collapse {
    width: 100%;
    float: left;
    position: absolute;
    top: 100%;
    background: #1B1B1B;
    left: 0;
    z-index: 9999999;
}

.header-container {
    width: 100%;
}
.navbar-header {
    padding-right: 0;
    margin-right: 0;
}

/* Navbar */

.navbar-custom .navbar-nav {
    letter-spacing: 3px;
    margin-top: 1px;
    margin-bottom: 0;
    width: 100%;
            text-align: center;
}

这实际上使切换栏显示，但存在问题:

1. 单击时导航栏不会折叠；和
2. 导航开关和菜单项之间有空格。

我将非常感谢对此的任何帮助。

Answer 1

这是你想要的吗？

我不确定这些元素是否是您要调整大小的元素，如果不是，请更改 .navbar-custom 或 .navbar-nav 如果您想要调整两个以上的大小，请再次复制并粘贴代码。

.navbar-custom {
width: 235px;
padding-left:30px
}

.navbar-nav {
float: right; 
width: 235px; 
margin: 0; 
padding: 0;
}

顺便说一句，这位于主 CSS 的底部。