navbar disappears at medium (768px) - bootstrap 3.3.7 - css

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">
SCOTTCREW'S OWN SILICONE MOLDS <i class="fa fa-angle-down"></i>
<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 >> </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 >> </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:)