I have a standard navbar in bootstrap. When it collapses, I see nothing but a hamburger menu button and all li's are folded underneath.
<nav class="navbar navbar-inverse navbar-static-top" 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">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- 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>Home</li>
<li>Store</li>
<li>Blog</li>
<li>About</li>
</ul>
</div>
</div>
</nav>
When it collapses (mobile/small screen) I would like for the "Store" link to stay visible at the top of the navbar, left of the Hamburger menu. Can I do this using bootstrap's classes, or do I need to do this manually via #media?
Here I got a solution. Try putting the button after
<div class="navbar-header">
and before
<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>
Here is a JsFiddle. What I basically did:
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="btn btn-default hidden-lg hidden-md hidden-sm" aria-label="Left Align" href="/store">
Store
</button>
<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>
</div>
<!-- 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>Home</li>
<li>Store</li>
<li>Blog</li>
<li>About</li>
</ul>
</div>
</div>
Hope I could help you and my answer solved your problem. :)
Related
I want to create two columns in my navbar. I use Bootstrap css.
All buttons are now lined out to the left. I would like to have the two last buttons to line out to the right... Is this possible and how do I do it ?
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top" background-color: #eb8d22>
<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>
<a class="navbar-brand" href="index.html"></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li>FOOD</li>
<li>FOTO'S</li>
<li>ARCHIEF</li>
<li>PETER</li>
<li>VAKANTIEWONING</li>
</ul>
</div>
</nav>
The second <ul> list with 2 items is on the right side. Groet uit regio den haag.
<nav class="navbar navbar-default navbar-fixed-top" style="background-color: #eb8d22;">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarList" aria-expanded="false">
<span class="sr-only">Toggle menu</span>
<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">My Site</a>
</div>
<div class="collapse navbar-collapse" id="navbarList">
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li>FOOD</li>
<li>FOTO'S</li>
<li>ARCHIEF</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>PETER</li>
<li>VAKANTIEWONING</li>
</ul>
</div>
</div>
</nav>
the following code does not show the list items when I press the button instead the list items appear as header in navbar.
<nav id="header-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="#collapsable-nav">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<h1>Food,LLC</h1>
</div>
<div id="collapsable-nav" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Sandwich</li>
<li>Pizza</li>
<li>Pasta</li>
</ul>
</div>
</div>
</nav>
I'm trying to get the notification icon with the badge on the same row as the drop down menu on the right and the header on the left. I'm also looking to have the notification icon with badge just to the left of the Action menu on the right. Not sure how to get that working correctly.
https://jsfiddle.net/DTcHh/33742/
<nav class="navbar navbar-inverse navbar-static-top">
<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="/">Reclamation</a>
</div>
<div style="display: inline-block;">
<button class="btn btn-default btn-lg btn-link" style="font-size:36px;">
<span class="glyphicon glyphicon-comment"></span>
</button>
<span class="badge badge-notify">3</span>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Actions <span class="caret"></span>
<ul class="dropdown-menu">
</ul>
</li>
</ul>
</div>
</div>
</nav>
You were really close, I just moved your notification icon down in the HTML, and then added the class pull-right to it since you are using bootstrap.
See my fiddle.
<nav class="navbar navbar-inverse navbar-static-top">
<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="/">Reclamation</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Actions <span class="caret"></span>
<ul class="dropdown-menu">
</ul>
</li>
</ul>
<div class="pull-right" style="display: inline-block;">
<button class="btn btn-default btn-lg btn-link" style="font-size:36px;">
<span class="glyphicon glyphicon-comment"></span>
</button>
<span class="badge badge-notify">3</span>
</div>
</div>
</div>
</nav>
The main issue is that you have display: block!important on your .navbar-collapse.collapse class. Change that to display: inline-block and everything will be in the same row in your container-fluid. I also wouldn't apply an inline style to your container div for your button and badge, give it a class and style from there.
I have this code for navigation and it's not displaying the 3 horizontal bars that must be displayed when resizing the browser.
Below is my code:
<LINK REL=StyleSheet HREF="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" TYPE="text/css">
<nav class="navbar navbar-invesre">
<div class="container">
<a class="navbar-brand">Team Management</a>
<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">
<ul class="nav navbar-nav">
<li><a>Teams List</a>
</li>
<li><a><i class="glyphicon glyphicon-plus"></i>Add Team</a>
</li>
</ul>
</div>
</div>
</nav>
As shown in the code, icon bar should be displayed when resizing the browser, but it's not. Any idea?
As #vanburenx pointed out you simply spelled inverse incorrectly. The hamburger menu, as it's called, is there its just white on white. Change to :
<div class="navbar navbar-inverse">
I am using Bootstrap navbar. inside that i am using navbar-nav and navbar-button all floated to the right. navbar-button have a padding-left of 12px and the last anchor tag of navbar-nav have a padding-right of 15px.
My question is why i am not getting space of 12px + 15px
JsFiddle
<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-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" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<button type="button" class="btn btn-default navbar-btn navbar-right">Sign in</button>
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>nav1</li>
<li>nav2</li>
<li>nav3</li>
<li>nav4</li>
</ul>
</div>
</div>
</nav>
Your style got overwritten of using this.
#media (min-width: 768px){
.navbar-nav.navbar-right:last-child
{
margin-right:-15px;
}
}