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>Sign In</li>
<li>Sign Up</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.
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">
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"/>
Related
I have tried just about everything to get the toggle navigation to work and I have had no luck. Is it just a simple mistake or piece of code I'm missing? I have tried loading different scripts but still nothing.
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" style="background-color: #f2f2f2">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target="#nav-collapse" style="margin-top: 20px;">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#/home" class="navbar-brand">
<img src="img/evodent-logo.png" alt="evodent-logo" style="width:190px;">
</a>
</div>
<div class="collapse navbar-collapse" id="nav-collapse">
<ul class="nav navbar-nav navbar-right">
<li>
ABOUT
</li>
<li>
CONTACT
</li>
</ul>
</div>
</div>
</nav>
It seems like the code is working just fine as is. Make sure that you are including the bootstrap.min.js file on your page as well. As the collapsible components in bootstrap require this plugin/file.
Here is the official documentation on the Bootstrap Navbar that mentions that the plugin is required: http://getbootstrap.com/components/#navbar
Requires JavaScript plugin
If JavaScript is disabled and the viewport is narrow enough that the navbar collapses, it will be impossible to expand the navbar and view the content within the .navbar-collapse.
The responsive navbar requires the collapse plugin to be included in your version of Bootstrap.
I have made a bootstrap responsive navigation menu, where it collapses into a box when the page gets small. Pretty much the standard one with bootstrap. However, when the page gets small the menu appears out automatically instead of me having to click the toggle box. Any ideas on how to fix this?
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only"> Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse" collapse">
<div id="navigation">
<ul class="nav navbar-nav navbar-center">
<li>Budget Tracker</li>
<li>Interactive Globe</li>
<li>Travel Quiz</li>
<li>Forum</li>
</ul>
</div>
</div>
This is the code for my bootstrap collapsable menu.
Also does anyone know how to make the toggle box appear in the center of the screen, rather than on the right?
It was the " between the "navbar-collapse" collapse" classes
You need to remove the " that's breaking up the classes in navbar-collapse
You are referencing the wrong element with your data-target. Give this a shot.
button type="button" class="navbar-toggle" data-toggle="collapse" data- target="#navigation">
Also, W3Schools has a great tutorial on this.
I have a Bootstrap navbar for my site for my menu. It's only used for mobile devices so the menu is always collapsed, into a standard navbar collapse button. This is aligned right; what I want, is a back-button in the same navbar that looks just like the menu collapse button, just with a different glyphicon (chevron-left), aligned left. Any ideas as to how to achieve this?
This is the menu code:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Meistro</li>
<li>Deelnemers</li>
<li>Jury</li>
<li>Het orkest</li>
<li>De Harmonie</li>
<li><a class="stemmen" href="#">Stemmen</a></li>
<li>Nieuwsbrief</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
Here's a working example of the below: http://seanconnelly.me/bootstrap-standard-button-with-left-mobile-back-button
Add a new Button right above your other button:
<button type="button" class="navbar-toggle navbar-left"><span class="glyphicon glyphicon-chevron-left"></span></button>
Note that I've added a new class called navbar-left. You can rename this to whatever you want to (such as back-button). I'm also using the glyphicon left chevron that ships with Bootstrap by default, you can change it out if you're using FontAwesome or something else.
Add the CSS
.navbar-left {
float:left;
margin-left:15px;
padding:6px 10px;
}
Should be it -- tweak it from there to fit your purpose. Hope this helps.
These dog gone phone manufacturers are making our job harder. The introduction of larger phones is causing Bootstrap RWD to respond as a tablet instead of a phone. This is not a major deal sometimes because the responsiveness did take place but the dropdown menu (hamburger menu) fails to show up and forcing it to open prematurely it's not right either. Then you'll have the same problem with smaller tablets or phones in landscape mode.
Here is what I mean:
This is the way I designed it to look for col-xs-12 and instead I am getting the col-sm-12 to render in the phones as the image further below displays. "So what if the hamburger menu doesn't display", you'll say. The regular menu is still too small in a phone and hard to tap.
here is the code I am using for the header
<header>
<div class="header">
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">MENU</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/"><img src="images/banner.png" alt="banner" /></a>
</div>
<div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav" id="navigation">
<li class="active">Home</li>
<li>about</li>
<li>testimonials</li>
<li>services</li>
<li>contact</li>
</ul>
</div>
</div>
</nav>
</div>
</header>
Anyone knows how to get around this.
Well, I found the problem folks. I feel like doing a face palm so please, I accept all the "duh" and "doi" you throw my way. lol Here is how to fix it.
Add <meta name="viewport" content="width=device-width, initial-scale=1"> to the head and voila!
:shaking my head:
I'm using Cordova to build a cross-platform app. I'm using bootstrap for my framework and I'm running into some trouble with the navbar. I'm not using any special CSS for it or anything. Here is my code:
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Header</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Terms & Conditions</li>
<li><a id="logout">Logout</a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
Here is my viewport settings in case that matters:
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=medium-dpi"/>
When the keyboard is shown (when I'm inside a text field), the navbar gets pushed up. If I click a button while the keyboard is open, the keyboard disappears and the navbar gets stuck halfway down the page (I'm guessing where it was when the keyboard was up). I've made a screen recording of it to better explain. It's here: https://vid.me/zIc
Also, in Cordova I have "DisallowOverscroll=true" so you can't scroll if there is no need. If I have this set to false, it still happens, but if I scroll even the slightest bit, it jumps into place!
It seems as though it WAS my viewport settings. I removed the "height=device-height" and it seems to work now!