This particular navigation bar, featuring a logo image in the center, functions well on larger screens. However, when viewed on smaller screens, everything disappears, including the logo image, and the hamburger menu icon fails to display. Is there a solution to this problem?
Check out the link for reference: http://codepen.io/davidcochran/pen/Fkwys
#navbar-primary .navbar-nav {
width: 100%;
text-align: center;
}
#navbar-primary .navbar-nav > li {
display: inline-block;
float: none;
}
#navbar-primary .navbar-nav > li > a {
padding-left: 30px;
padding-right: 30px;
}<header role="banner">
<nav id="navbar-primary" class="navbar" role="navigation>
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->:
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-primary-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar-primary-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#"><img id="logo-navbar-middle" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/32877/logo-thing.png" width="200" alt="Logo Thing main logo"></a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header><!—header role=”banner” —>