navbar disappears at medium (768px) - bootstrap 3.3.7

Question

I have two navbars on my page. The first one is working, but the second one is not. I have the following code for the 2nd one:

                  <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>

The actual working page can be seen at (The site is currently in development and not a live site):

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

Can anyone tell me why the navigation doesn't show at medium and how I can fix this?

Thanks!

Answer 1

on you main css class you have this :

your cat navbar will be hidden if screen size is blower than 1200px based this css code on responsive.css :

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

so your first navbar has a responsive css and is visible only if screen is more than 1200px.

and about second navbar :

if only screen is more than 768px, it would be shown in style.css

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

So there is a gap between this two @media size , and there will be no navbar if screen is more than 768px and less than 1200px.

Anyway for fixing the navbar you asked do these steps: 1-

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

2- add hidden-lg to this :

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

3- and hidden-lg to this

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

4- remove hiden-md and add a new class name like navbarNew

finaly they they have to be like blow:

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

And

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

And it would works Fine:)