Bootstrap 3 Navbar Not Responsive

html twitter-bootstrap responsive-design nav responsiveness
John Halbert picture John Halbert · Apr 25, 2015 · Viewed 9.8k times · Source

I've been testing my bootstrap site on various devices to ensure it's responsive. I've got everything resizing correctly for different display sizes except the navbar. On my browser, when I resize the window horizontally it seems to respond, collapsing the menu as expected, but on mobile devices I still see the navbar as if it were displaying in a full screen window on a desktop or laptop. Here is the code for my navbar:

<div class="container">
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">
          <img alt="WinShir" src="img/rocket.png" /> WinShir
        </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>
          <span class="sr-only">Toggle Navigation</span>
        </button>
      </div>

      <ul class="nav navbar-nav navbar-right collapse navbar-collapse">
        <li><a href="#signInModal" data-toggle="modal">Sign In</a></li>
        <li><a href="#signupModal" data-toggle="modal">Sign Up</a></li>
      </ul>
    </div>

  </nav>
</div>

I've tried changing the nav element to a div to see if that helped without success. I also removed the enclosing container class div to see if that helped with no luck there either.

Answer

ThisClark picture ThisClark · Apr 25, 2015

You probably didn't set your viewport. Put this in the <head> and see if it makes a difference.

<meta name="viewport" content="width=device-width, initial-scale=1">

Related questions

Hiding elements in responsive layout?

Looking through bootstrap it looks like they support collapsing the menubar items for smaller screens. Is there something similar for other items on the page? For example, I have a along with nav-pills floated right. On a small screen this …

Read More
Making button go full-width?

I want a button to take up the full width of the column, but having difficulties... <div class="span9 btn-block"> <button class="btn btn-large btn-block btn-primary" type="button">Block level button</button> </div&…

Read More
Creating a fixed sidebar alongside a centered Bootstrap 3 grid

I'd like to create a fixed sidebar that exists outside my centered Bootstrap Grid. The challenge I face when attempting to do this is determining what additional styles to apply/overwrite to my .container so that it doesn't overlap my …

Read More