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;
}
}
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 having some issue with my navigation bar. It turns out like this:
But I want it too look like this:
The code looks a little like this:
<nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation">
<div class="container topnav">
<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 topnav" href="#" target="_blank">Name</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
This is a plain CSS implementation with flexbox wihtout knowing your other CSS stuff:
.navbar > .container{
display:flex;
flex-flow:row wrap;
justify-content: space-between;
}
.navbar-right{
display:flex;
flex-flow:row wrap;
justify-content: flex-end;
}
.navbar-right li{
list-style:none;
}
.navbar a{
display:block;
padding:0.3em 1em 0.5em 1em;
}
<nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation">
<div class="container topnav">
<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 topnav" href="#" target="_blank">Name</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</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 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>