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.
Related
When I use the bootstrap template in my Flask project there is no button on my website when I debug it.
And jquery version is 3.3.1 min , bootstrap version is 4 min
Fig1 is my html, and Fig2 is expected. My navigation button does not appear
my htmlexpected html elements review by chrome
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">切换导航</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand navbar-title" href="/">ATM Tech</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>艾特码科技</li>
<li>彭锟的技术博客</li>
</ul>
</div>
</div>
Try changing the size of your browser window, or inspect in responsive mode. Also, go to bootstrap docs and see if you have all the right class names, collapsed doesn't seem like a valid one.
I'm trying to make dropdown navbar box black, I've been looking for solution for 2 days, but still even templates from bootstrap docs doesn't work properly, I mean that dropdown box.
Here is my html code for navbar:
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navcol-1">
<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 navbar-link"><img src="/images /logo.png"></a>
</div>
<div class="collapse navbar-collapse" id="navcol-1">
<ul class="nav navbar-nav navbar-right">
<li role="presentation">Main </li>
<li role="presentation">Main </li>
<li role="presentation">Main </li>
<li role="presentation">Courses </li>
<li role="presentation">Help
<a class="visible-sm-block" href="#"> </a>
</li>
</ul>
</div>
</div>
</nav>
Here is Page hierarchy:
You're correctly using .navbar-inverse, which should already be making your navbar black, as can be seen here.
There are a couple of reasons why this may not be working for you.
You've not referenced Bootstrap correctly.In this case, check for errors in your F12 Developer Tools' console.
You're using CSS for a different version of Bootstrap than the one you've loaded.
You have code that is overriding the defaults with higher specificity.
You have cached outdated CSS. Refresh your stylesheet refrence with CTRL + F5, and hold SHIFT while clicking on the refresh icon to ensure you clear your CSS cache as well.
Hope this helps! :)
I'm fairly new in Bootstrap. Can you guys give me some advice on how to edit a Bootstrap mobile menu like http://apple.com website when resize to its mobile breakpoint. It's really cool with animations. I want my Bootstrap site to look different. Thanks.
Bootstrap mobile menu icon is generated with:
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Notice, the data-target to collapse:
<ul class="nav navbar-nav" class="nav-collapse collapse" id="myNavbar">
Now, Edit or Add animations of your choice.
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 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.