-1

我的页面上有两个导航栏。第一个正在工作，但第二个没有。我有以下第二个代码：

                  <nav class="navbar navbar-default">
                  <!-- <div class="container-fluid"> -->
                  <!-- Brand and toggle get grouped for better mobile display -->
                  <div class="navbar-header">
         <span class="hidden-md hidden-lg"><a class="navbar-brand" href="#"> PRODUCTS >>  </a></span>
                      <button type="button" class="navbar-toggle1 collapsed" data-toggle="collapse" data-target="#cat-nav-mega">
                          <span class="sr-only">Toggle navigation</span>
                          <span class="icon-bar"></span>
                          <span class="icon-bar"></span>
                          <span class="icon-bar"></span>                  
                      </button>
                  </div>

                  <!-- Collect the nav links, forms, and other content for toggling -->
                  <div class="collapse navbar-collapse" id="cat-nav-mega">
                      <ul class="nav navbar-nav">
                          <li class="dropdown menu-large">
                              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">SCOTTCREW'S OWN SILICONE MOLDS <i class="fa fa-angle-down"></i></a>
                              <ul class="dropdown-menu megamenu" role="menu">
                                  <li>

可以在以下位置查看实际工作页面（该站点目前正在开发中，而不是实时站点）：

https://www.scottcrewcandlesupply.com/agoracart55/agora.cgi?keywords=books#

谁能告诉我为什么导航不显示在中，我该如何解决这个问题？

谢谢！

4

1 回答 1

0

在你的主要 CSS 类上，你有这个：

如果屏幕尺寸小于 1200px，则基于 responsive.css 上的 css 代码，您的猫导航栏将被隐藏：

@media (max-width:1200px)
 {
   .navbar-collapse.collapse
     {
       display: none!important;
     }
}

因此，您的第一个导航栏具有响应式 CSS，并且仅在屏幕大于 1200 像素时才可见。

关于第二个导航栏：

如果只有 screen 大于 768px，它将显示在 style.css 中

@media (min-width: 768px) {
      navbar-toggle1 {
    display: none;
}

所以这两个尺寸之间是有差距的@media，如果屏幕大于 768px 小于 1200px 就没有导航栏。

无论如何，要修复您要求的导航栏，请执行以下步骤： 1-

 .navbar-toggle1 {   // at style.css line 68
display: none;
 }

2-添加 hidden-lg 到这个：

 <`a href="#" class="navbar-brand hidden-lg"> PRODUCTS &gt;&gt;  </a>`

3-和隐藏-lg到这个

<button type="button" data-toggle="collapse" data-target="#cat-nav-mega"
 class="navbar-toggle1 collapsed hidden-lg">

4-删除hiden-md并添加一个新的类名，如navbarNew

最后他们必须像打击一样：

<span class="navbarNew"><a href="#" class="navbar-brand hidden-lg">
 PRODUCTS &gt;&gt;  </a></span>

和

<button type="button" data-toggle="collapse" data-target="#cat-nav-mega"
 class="navbar-toggle1 collapsed hidden-lg">

它会很好用:)

于 2019-12-29T00:16:34.673 回答