Bootstrap 3 Navbar Not Responsive

Asked 25/4, 2015 at 4:18 Answered 21/7, 2022 at 11:37

Solved html twitter-bootstrap responsive-design nav responsiveness

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.

Mcadoo answered 25/4, 2015 at 4:18 Comment(2)

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? – Pumpernickel 25/4, 2015 at 4: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. – Mcadoo 26/4, 2015 at 10:46

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

Pumpernickel answered 25/4, 2015 at 4:37 Comment(2)

This was the problem. Thanks! – Mcadoo 26/4, 2015 at 10:51

You saved me a lot of stress trying to figure this one out haha thank you! – Unchancy 31/8, 2022 at 6:48

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

Shivaree answered 21/7, 2022 at 11:37 Comment(0)

Recommended topics

Hot tags