My bootstrap navbar has a CSS media query that collapses it and allows it to be opened via a hamburger button when the screen size is below a certain threshold (for mobile devices). However, I have encountered an issue with a dropdown menu within the navbar. The dropdown menu works perfectly when the navbar is fully expanded on a wide screen, but when I open it from the hamburger version of the navbar, the buttons in the dropdown menu do not appear.
On a WIDE SCREEN, the NAVBAR DROPDOWN functions correctly: [![WIDE SCREEN - NAVBAR DROP DOWN WORKS FINE][1]][1]
On a NARROW SCREEN (hamburger), the DROPDOWN MENU BUTTONS DO NOT DISPLAY: [![NARROW SCREEN (hamburger) - DROPDOWN MENU BUTTONS DO NOT SHOW][2]][2]
Here is the HTML code for the Navbar:
<nav class="navbar navbar-default" data-spy="affix" data-offset-top="900">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"gt;<
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="Blog v.0.html#postWelcome"> Blog </a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active" id="home"><a href="Blog v.0.html#postWelcome">Home <span class="sr-only">(current)</span></a></li>
<li><a href="#">What is this Blog?</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Streams <span class="caret"></span></a>
<ul class="dropdown-menu pinkBackground">
<li><a style="color:#062F4F" href="#">Stream 1</a></li>
<li><a style="color:#062F4F" href="#">Stream 2</a></li>
<li><a style="color:#062F4F" href="#">Stream 3</a></li>
</ul>
</li>
</ul>
</div>
</nav>
This is the CSS media query that collapses the navbar:
@media (min-width: 768px) {
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
}
Below is the CSS code for my Navbar:
.navbar-default {
z-index: 1;
background-color: #062F4F;
border-color: #062F4F;
}
/* title */
.navbar-default .navbar-brand {
color: #FFFFFF;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #813772;
}
/* link */
.navbar-default .navbar-nav > li > a {
color: #FFFFFF;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #813772;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #FFFFFF;
background-color: #813772;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
color: #FFFFFF;
background-color: #062F4F;
}
/* caret */
.navbar-default .navbar-nav > .dropdown > a .caret {
border-top-color: #000000;
border-bottom-color: #000000;
}
I would appreciate any assistance in figuring out why the navbar dropdown buttons are not visible when the menu is expanded from the collapsed state using the hamburger button. I understand it might be a simple mistake, but I am unable to identify it.