CODEWITHSUNDEEP
csstwitter-bootstrap
ShoeLace1291
ShoeLace1291

Reputation: 4698

How can I make bootstrap's hamburger menu appear on tablets?

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>

Upvotes: 1

Views: 5620

Answers (1)

erica
erica

Reputation: 71

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"

Upvotes: 1

Related Questions