Bootstrap 3 Navbar Not Responsive

Question

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.

Does the rest of your site respond, just not the navbar? Is it zoomed in on mobile or does it look like a tiny, zoomed out desktop version? — ThisClark, Apr 25 '15 at 04:39
Yes, everything else responds properly, just not the navbar. I mentioned in the post, but it seems there's some confusion. On my laptop, it responds when I resize the window. With or without the container div mentioned below. On my phone (this is android, chrome browser), everything responds except the navbar. Again, with or without the container div. — John Halbert, Apr 26 '15 at 10:46

ThisClark · Accepted Answer · 2016-05-12T18:56:43.307

24

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">

edited May 12 '16 at 18:56

answered Apr 25 '15 at 04:37

ThisClark

14,352
10
69
100

This was the problem. Thanks! – John Halbert Apr 26 '15 at 10:51
1

You saved me a lot of stress trying to figure this one out haha thank you! – Joshua Aug 31 '22 at 06:48

score 0 · Answer 2 · answered Jul 21 '22 at 11:37

I was having the same problem in one of my react projects.

Even after adding the <meta> tag the menu wasn't responsive.

But you can solve this by giving a custom onClick listener to the hamburger menu button. Use this code for the <button> used to expand the menu in mobile devices-

<button className="navbar-toggler" onClick={()=>{document.body.style.zoom=0.8;}} type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"/>

Bootstrap 3 Navbar Not Responsive

2 Answers2