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>
Related
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 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. :)
This is my code for navbar it works with desktop but when i go with responsive the menu links does't work . i click on menu and nothing happen please help.
<header class="header">
<div class="header-nav">
<nav role="navigation" class="navbar navbar-default navbar-fixed-top navbar-slide show-menu" style="background-color:#7c3a1c;">
<div class="container">
<div class="navbar-header">
<button aria-controls="navbar" data-target="#navbar" data-toggle="collapse" class="navbar-toggle collapsed" type="button"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<a id="header-logo" href="index.php" class="navbar-brand"><img class="margin-top" src="images/logo.jpg" alt=""></a> </div>
<div class="navbar-collapse collapse" id="navbar" aria-expanded="false" role="menu" style="height: 1px;">
<ul class="nav navbar-nav style2 navbar-right">
<li>Home</li>
<li>About Us</li>
<li>Gallery</li>
<li>Contact</li>
<li style="background-color: #cc1b47;">805-305-2630</li>
</ul>
</div>
</div>
</nav>
</div>
</header>
`
Check this snippet..
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<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>
<header class="header">
<div class="header-nav">
<nav role="navigation" class="navbar navbar-default navbar-fixed-top navbar-slide show-menu" style="background-color:#7c3a1c;">
<div class="container">
<div class="navbar-header">
<button aria-controls="navbar" data-target="#navbar" data-toggle="collapse" class="navbar-toggle collapsed" type="button"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
</button>
<a id="header-logo" href="index.php" class="navbar-brand">
<img class="margin-top" src="images/logo.jpg" alt="">
</a>
</div>
<div class="navbar-collapse collapse" id="navbar" aria-expanded="false" role="menu" style="height: 1px;">
<ul class="nav navbar-nav style2 navbar-right">
<li>Home
</li>
<li>About Us
</li>
<li>Gallery
</li>
<li>Contact
</li>
<li style="background-color: #cc1b47;">805-305-2630
</li>
</ul>
</div>
</div>
</nav>
</div>
</header>
I want to change the navbar-brand so that the two words are two separate colors. I am having trouble doing that at the moment as no matter what CSS I use it doesn't seem to change the color. The padding I used does take effect so it is targeting it, just not changing the color. Could anyone help me with what I need to do?
<nav class="navbar navbar-inverse navbar-fluid" 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>
<a class="navbar-brand" href="#"><div class="translation">TRANSLATION</div><div class="commons">COMMONS</div></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav nav pull-right">
<li>
Home
</li>
<li>
Register
</li>
<li>
Log In
</li>
<li>
About
</li>
<li>
Contact
</li>
<li>
Donate
</li>
</ul>
</div>
</div>
Use SPAN and assign a color.
.red {
color: red;
}
.white {
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-fluid" 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> <a class="navbar-brand" href="#"><span class="red">TRANSLATION</span> <span class="white">Commons</span></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav nav pull-right">
<li>Home
</li>
<li>Register
</li>
<li>Log In
</li>
<li>About
</li>
<li>Contact
</li>
<li>Donate
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>