1

I am trying to make my site's header responsive and I'm having trouble with the burger menu. The way my header is designed, the navbar breaks at tablets. I have my navbar set with a class of hidden-xs hidden-sm hidden-md which works fine. The problem is that the burger menu only displays on xs and sm. Adding a class of visible-md-block makes the burger menu not display even on devices smaller than tablets. There's just a white background with nothing else in it.... so it's just a white border. How can I display the burger menu on anything smaller than a desktop?

<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed  visible-xs-block visible-sm-block visible-md-block" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
      <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="bs-example-navbar-collapse-1">
    <ul id="menu-menu-1" class="nav navbar-nav hidden-md hidden-sm">
      <li><a title="Home" href="#">Home</a></li>
      <li><a title="Blog" href="#">Blog</a></li>
      <li><a title="Portfolio" href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Portfolio <span class="caret"></span></a>
        <ul role="menu" class=" dropdown-menu">
          <li><a title="Development Projects" href="#">Development Projects</a></li>
          <li><a title="Website Templates" href="#">Website Templates</a></li>
          <li><a title="Photo Gallery" href="#">Photo Gallery</a></li>
          <li><a title="Graphic Design" href="#">Graphic Design</a></li>
        </ul>
      </li>
      <li><a title="Resources" href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Resources <span class="caret"></span></a>
        <ul role="menu" class=" dropdown-menu">
          <li><a title="HTML &amp; CSS" href="#">HTML &#038; CSS</a></li>
          <li><a title="JavaScript &amp; jQuery" href="#">JavaScript &#038; jQuery</a></li>
          <li><a title="PHP and MySQL" href="#">PHP and MySQL</a></li>
        </ul>
      </li>
      <li><a title="Services" href="#">Services</a></li>
      <li><a title="About" href="#">About</a></li>
      <li><a title="Contact" href="#">Contact</a></li>
    </ul>
  </div>
</nav>
ShoeLace1291
  • 4,551
  • 12
  • 45
  • 81
  • Please post a working example of your code (HTML/CSS/JS) in a [Snippet](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). See [mcve].. – vanburen Feb 18 '16 at 21:54
  • 1
    Check out this question/answer: http://stackoverflow.com/questions/22329606/bootstrap-navbar-collapse-media-query-on-custom-width – Aaron Vanston Feb 18 '16 at 22:07

1 Answers1

1

with the bootstrap visible-*-block class you have to specify each size that you want to be visible. so if you add visible-sm-block and visible-xs-block you should be able to see your hamburger menu on small and extra small devices as well.

http://getbootstrap.com/css/#responsive-utilities

it looks like you also need to remove the hidden classes and then move the visible classes to the navbar-header div: class="navbar-header visible-xs-block visible-sm-block visible-md-block"

erica
  • 71
  • 2
  • 7
  • I didn't think I needed to specify that it was visible on xs since it is by default. I've updated it with those utilities in the toggle button tag. The burger menu displays, but nothing happens when I click on it when it's on the tablet size. – ShoeLace1291 Feb 18 '16 at 22:08
  • it looks like you need to remove the hidden-sm and hidden-md from the dropdown. – erica Feb 18 '16 at 22:19
  • but doing that makes the nav appear on anything bigger than xs. – ShoeLace1291 Feb 18 '16 at 23:01
  • ok, i just tested out the code and if you remove the hidden classes from the ul and then move the visible classes from the button to the navbar-header div then i think it works they way you want it... i updated my answer. hope this helps! – erica Feb 19 '16 at 00:10