I'm new to Bootstrap and just attempting to get the responsive navigation to work. When I resize the window, I do see the collapsed navbar icon but it doesn't display the add link.
<div class="container">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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>
My Books
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Add</li>
</ul>
</div>
</div>
</nav>
</div>
I found the source of the problem.
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
In fact should be:
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#.navbar-collapse">
data-target should be the class name of the nav div.
Related
This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed 2 years ago.
I have the following navbar using bootstrap
I have created it using the following code snippet (Here I'm using bootstrap version 3.3.5)
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="http://www.someone.com/">Home</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>About</li>
</ul>
</div>
</div>
</nav>
</body>
But I wanted center this navbar to the center of the page like below
I need to know how to do this using additional css styling .
You can try like this:
Here I have added one class navbar-content to second line.
<nav class="navbar navbar-default">
<div class="container-fluid navbar-content">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="http://www.someone.com/">Home</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>About</li>
</ul>
</div>
</div>
</nav>
Put bellow styles in your css file.
.navbar-content {
display: flex;
justify-content: center;
}
Apply margin: 0 auto; to navbar class to center.
.navbar {
width: 500px;
margin: 0 auto;
}
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="http://epidemicdash.epizy.com/">Home</a>
<a class="navbar-brand" href="http://epidemicdash.epizy.com/">User</a>
<a class="navbar-brand" href="http://epidemicdash.epizy.com/">About</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>About</li>
</ul>
</div>
</div>
</nav>
I made a dropdown menu, but now I want this menu to only show in mobile view, and not in other views. I guess it's done using "visible-xs" or something like that, but I couldn't code it.
Here's my HTML,
<nav class="navbar navbar-custom">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Food, LLC</a>
</div>
<div>
<button type="button" class="navbar-toggler collapsed" data-toggle="collapse" data-target="#collapsable-nav" aria-expanded="false">
<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="collapsable-nav" class="collapse navbar-collapse">
<ul id="nav-list" class="nav navbar-nav navbar-right">
<li>Chicken</li>
<li>Beef</li>
<li>Sushi</li>
</ul>
</div>
</div>
</nav>
<nav class="navbar navbar-custom">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Food, LLC</a>
</div>
<div>
<button type="button" class="navbar-toggler collapsed" data-toggle="collapse" data-target="#collapsable-nav" aria-expanded="false">
<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="collapsable-nav" class="collapse navbar-collapse visible-xs">
<ul id="nav-list" class="nav navbar-nav navbar-right ">
<li>Chicken</li>
<li>Beef</li>
<li>Sushi</li>
</ul>
</div>
</div>
</nav>
Here is how it looks like when the drop-down menu appears.
Nav-bar :
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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="#">Categories</a>
...
Drop-down:
<ul class="dropdown-menu">
<li>
<div class="panel panel-default">
<div class="panel-body">
<div class="panel-info">
<p><strong>Black Dress</strong></p>
<p>Each Price : <strong>Rs. 500.00</strong></p>
<p>Quantity : <input type="number" value="3"/>
<a href="#"><span class="glyphicon glyphicon-refresh"></span></p>
....
Tried with positioning(position:relative).But couldn't get the required result. (Drop-down over the nav-bar) .Thanks in advance.
Here is an example of my work.
Why the given z-index doesn't work?
.dropdown-menu is not in the same level of .navbar so give z-index:1010; and position:relative; to the #header(its parent).
Jsfiddle
I am using bootstrap, and now I have this HTML code for Navbar
<nav class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand">Menu</div>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Index", "Index", "Home")</li>
<li>#Html.ActionLink("Contacts", "Contacts", "Home")</li>
</ul>
</div>
</nav>
Now I would like to add there a SearchBox with the Search-icon, which will be on the right side of the nav bar, but when the navbar is "packed" into Hamburger button, I would like this Search Box to be "packed" into Search-icon-button, which would appear right-side from Hamburger button.
I'm currently trying to create a Navbar with 100% width in Bootstrap, but it isn't working like it should.
How can I scale the Navbar to 100% width?
<div class="container-fluid" style="border: 1px solid">
<!-- Navbar -->
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
<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="#">Bootflat</a>
</div>
</div>
</nav>
</div>
</div>
</div>
Picture:
http://i.imgur.com/diqTvTP.png
Remove .row and .col-md-12 divs – they add padding. You only need to use them when you divide content in columns.
I think this code looks fine as per your requirements.
<div style="border: 1px solid">
<nav class="navbar navbar-default" role="navigation">
<div>
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
<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="#">Bootflat</a>
</div>
</div>
</nav>
</div>
Please see here
You don't need the row and the grid col divs since the navbar will be at a full width at all times and you are using .container-fluid. Try this:
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
<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="#">Bootflat</a>
</div>
</div>
</nav>
As happened to me, if you want it with the full width on the top (sticky). Adding fixed-top class to the nav will do.
<nav class="navbar fixed-top navbar-light bg-light">
<a class="navbar-brand" href="#">Fixed top</a>
</nav>
Just add the following css code body{padding:0;margin:0}. It worked for me.
Hope this helps.