CODEWITHSUNDEEP
htmltwitter-bootstrapresponsive-designnavresponsiveness
John Halbert
John Halbert

Reputation: 1350

Bootstrap 3 Navbar Not Responsive

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.

Upvotes: 7

Views: 12503

Answers (2)

Prathamesh Patil
Prathamesh Patil

Reputation: 1

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

Upvotes: 0

ThisClark
ThisClark

Reputation: 14823

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

Upvotes: 24

Related Questions