Menu
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.
484
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">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
