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.
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 have a scenario where I need to display a footer just like navbar(i.e; need to hide list items of ul list using some button is responsive, on click of that button need to display list items), here I am using bootstrap navbar, but instead of hamburger I need some other customized button. Is it possible?
Here is my code:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">list1</li>
<li>list2</li>
<li>list3</li>
</ul>
</div>
</div>
</nav>
Any help would be appreciated.
Thanks in Advance.
From Bootstrap documentation ... You should be able to change the icon here
https://getbootstrap.com/docs/4.0/components/navbar/
External content
Sometimes you want to use the collapse plugin to trigger hidden content elsewhere on the page. Because our plugin works on the id and data-target matching, that’s easily done!
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="pos-f-t">
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4">
<h4 class="text-white">Collapsed content</h4>
<span class="text-muted">Toggleable via the navbar brand.</span>
</div>
</div>
<nav class="navbar navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
</div>
I've got this bootstrap3 navbar in my page, and the dang thing auto-spawns a drop-down-list for all the items in the navbar UL. How can I stop this?
My Navbar code:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container" style="margin-left: 0; margin-right: 0;">
<div class="navbar-header">
<a class="navbar-brand" href="/"><img id="brand_logo_img_cc" src="/Content/images/logo.gif" alt="" style="width: 295px; height: 47px;" /></a>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mainHeaderNavbar" aria-expanded="false" aria-controls="mainHeaderNavbar">
<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="mainHeaderNavbar" class="navbar-collapse collapse" aria-expanded="false" style="height: 1px;">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">Home</li>
<li class="dropdown"><!-- other generated links --></li>
</ul>
</div>
</div>
</nav>
Since there's no drop-down-list in my code (aside from the nav drop down buttons), I assume this Go To drop-down is auto-generated by Bootstrap, but I don't know how to get rid of it.
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'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.