Anirban Anirban - 1 month ago 10
HTML Question

navbar not visible in mobile display

I have the following navbar in my site:-

<nav class="navbar navbar-default no-margin show">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">
<button class="navbar-toggle collapse in" data-toggle="collapse" id="menu-toggle-2"> <span class="fa-stack"> <i class="fa fa-bars fa-stack-2x "></i></span></button>
</li>
</ul>
<div style="text-align: center; font-size: 20px; padding-top: 7px;">
<a href="http://sunlightfoundation.com/" target="_blank"><img src="images/logo.png"></a>
<p style="display: inline"><b>Congress API</b></p>
</div>
</div>
</nav>


This navbar is visible on medium screens like laptop but it is hidden in mobile displays. There is just a white strip in the mobile display. I dont have any CSS for the large devices should I set any CSS properties to get it shown in mobile devices. The toggle button is also not visible. Pretty new at this.

Answer

Your entire navbar is wrapped in the collapse class which is supposed to be hidden in the mobile display and toggled by the toggle button. But since your toggle button is in the collapse class it is being hidden in mobile widths. Your navbar structure should have a .navbar-header class where your toggle button and logo should be placed. Then your links should be placed in the .collapse class so the button will be displayed in moblile widths and then your content can be toggled. Here is an example of how your structure should look.

<div class="navbar navbar-default">
  <div class="navbar-header">
    <a class="navbar-brand" href="#">Your Logo</a>
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
  </div>
  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav navbar-right">
      <li class="active"><a href="#">Your Links</a></li>
      <li><a href="#">Your Links</a></li>
      <li><a href="#">Your Links</a></li>
    </ul>
  </div>
</div>