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.
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 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 found this button tag in the basic bootstrap html template (I added the arrows)
<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>
<a class="navbar-brand" href="#">Project name</a>
</div>
It's completely invisible (at least to me), and it doesn't seem to have any effect (it doesn't happen anything when I click).
Is it supposed to be like this, and what's the point of it?
Where is the button: That button can be seen when you reduce the webpage width, either by zooming in or using a mobile device to access the webpage.
What is this button for: That button is use to toggle the navbar dropdown on mobile devices.
Those three lines stacked on top of each other is the button:
It's the menu toggle for small displays like smartphones. On big screen it will be hidden.
As an addition to the above answers.
In order for the button to have a working functionality, you need to load jquery library and right after it the bootstrap jquery library.
These can be included either in the head tag of your html code or just before the end of the body tag (2nd option is best practice).
Try it like this (cdn used):
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
I want to create a navbar that looks like:
[BRAND1] ... [LINK1 | LINK2 | LINK3] ... [BRAND2]
this is what I get, but the collapsed menu looks weird and is missing the border between the navbar and the collapsed menu. http://www.bootply.com/fp8e8IYGuj
I'm happy with the look and behavior when the width is > than 768px, but not the collapsed look and behavior. I want it to behave like a "normal" collapsed menu. For example this one:
http://www.bootply.com/GDf0pzFK9b
You need to clear the floated elements, add this on your CSS:
/* navbar menu when collapsed */
#media (max-width: 767px) {
.navbar-collapse {
clear:both;
}
}
Check TheDemo
If you for some reason cant change the CSS like #Danko suggests then you could stick with the bootstrap classes provided and just duplicate brand2 element for mobile and desktop.
The hidden-* css classes within bootstrap allow you to do this with no additional CSS markup.
<div class="navbar-header">
BRAND1
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
BRAND23
</div>
BRAND2
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul>
</div>
Example at http://www.bootply.com/Qf9w7wNK6t
You can read more on the Bootstrap Docs - http://getbootstrap.com/css/#responsive-utilities
Personally I would use the clear:both method suggested.