I have a question about positioning my links on navbar collapse. I want the left sided links to be displayed on one line in the collapsed menu, and the right sided links to be displayed on the next line.
Right now I can get all the links displayed on the same line using "display: inline-flex" in my css, but I don't know how to separate them.
Here is my current HTML and CSS:
<div class="container">
<nav class="navbar navbar-inverse">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#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="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav navbar-left">
<li>Link 1</li>
<li>Link 2</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
</nav>
</div>
.navbar-right {
float: right;
margin-right: -15px;
}
.collapse > .navbar-left {
display: inline-flex;
}
.collapse > .navbar-right {
display: inline-flex;
}
.navbar .navbar-nav {
float: none;
vertical-align: top;
text-align: center;
}
And a link to my jsFiddle: https://jsfiddle.net/wdeg6rko/
Any help is much appreciated!
Use a media query to contain the rules so they only apply under 768px and use inline-block against the li items and set the navbar-navs width to 100% while removing any margin so they are actually centered.
Working example Snippet.
#media (max-width: 767px) {
.navbar.navbar-default .navbar-nav {
width: 100%;
text-align: center;
margin: 0;
}
.navbar.navbar-default .navbar-right > li,
.navbar.navbar-default .navbar-left > li {
display: inline-block;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<nav class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#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="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav navbar-left">
<li>Link 1
</li>
<li>Link 2
</li>
<li>Link 3
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Link 3
</li>
<li>Link 4
</li>
<li>Link 5
</li>
</ul>
</div>
</nav>
</div>
As there is float: left !important; is added to .navbar-left. To override it use following css:
.nav.navbar-nav.navbar-left {
float: none !important;
}
Fiddle
Related
I have the following Bootstrap navigation set up. I want to reduce the space between each li in the ul under the "Coverage" dropdown-toggle. What setting do I use to do this? As a side note, when I set float: left on the ul li a, the space is reduced, but I don't need float to do this. Why does it reduce the space though?
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand mycontent5" href="/?goHome=true"><span class="glyphicon glyphicon-home"></span></a>
<button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle">
<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="collapse navbar-collapse navbar-left">
<ul class="nav navbar-nav">
<li>Analysts</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Coverage<span class="caret"></span></a>
<ul class="dropdown-menu" id="mynavlist">
<li>All Coverage</li>
<li>Coverage Assignments</li>
<li>Portfolio Coverage</li>
<li>Portfolio Snapshot</li>
<li>Writeup Sections</li>
</ul>
</li>
<li>Funds</li>
<li>Intraday Orders</li>
<li>Reports</li>
</ul>
</div>
</nav>
EDIT: I changed my ul to have an id of "mynavlist", and added the following CSS:
#mynavlist li a {
padding-top: 0px !important;
padding-bottom: 0px !important;
margin-top: 0px !important;
margin-bottom: 0px !important;
}
This results in the following: I want to get rid of all white space above and below each item. Increasing the px sizes changes my list as expected, but how can I get rid of the extra space?
You have to reduce the top and bottom padding of each item. Try below css
.navbar-default .dropdown-menu>li>a {
padding: 0 20px;
}
/*For responsive*/
#media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu>li>a {
padding: 0 20px;
}
}
.navbar-default .dropdown-menu>li>a {
padding: 0 20px;
}
/*For responsive*/
#media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu>li>a {
padding: 0 20px;
}
}
<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.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand mycontent5" href="/?goHome=true"><span class="glyphicon glyphicon-home"></span></a>
<button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle">
<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="collapse navbar-collapse navbar-left">
<ul class="nav navbar-nav">
<li>Analysts</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Coverage<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>All Coverage</li>
<li>Coverage Assignments</li>
<li>Portfolio Coverage</li>
<li>Portfolio Snapshot</li>
<li>Writeup Sections</li>
</ul>
</li>
<li>Funds</li>
<li>Intraday Orders</li>
<li>Reports</li>
</ul>
</div>
</nav>
If you use your browsers Console or Inspector you can view each HTML element and any CSS that is being applied to that element. In the case of Bootstrap's Navbar component you will find the following:
.navbar-nav > li > a {
padding-top: 15px;
padding-bottom: 15px;
}
Changing 15px to some other value will result in your desired output, though you should note that Bootstrap modifies the top and bottom padding for this element based on certain media breakpoints: you will need to account for this in your customizations.
I'm using a bootstrap 3.3.7 navbar with 3 groups of items :
A) on the left (1 item),
B) centered (4 items),
C) on the right (1 item)
So I have :
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav tabs">
<!-- A) here are the left aligned LIs (float: left) -->
</ul>
<ul class="nav navbar-nav navbar-right">
<!-- C) here are the right aligned LIs (float: right) -->
</ul>
<ul class="nav navbar-nav navbar-center tabs">
<!-- B) here are the right aligned LIs (float: none; text-align: center; font-size:0) -->
</ul>
</div>
</nav>
As asked in the comments, here is my CSS :
.navbar-nav > li {
float: left;
position: relative;
}
.navbar-right {
float: right!important;
margin-right: -15px;
}
.navbar-nav.navbar-center {
float: none;
text-align: center;
font-size: 0;
}
.navbar-nav.navbar-center > li {
vertical-align: top;
display: inline-block;
float: none;
font-size: 1.3rem;
}
Here is a JSFiddle showing it : https://jsfiddle.net/m5s8ov8j/ (please drag'n drop the JSFiddle centered vertical separator to the left to see the result as Bootstrap turns the nevbar into a hamburger menu).
Now I'm asked to insert a new group of 2 items between groups (B) and (C) with 2 conditions :
group (B) (centered) must remain centered,
the new group must be centered between the LAST item of (B) and the FIRST item of (C).
How can I do so ?
I don't think it can be done with CSS alone, but here's a solution with JavaScript. Position the new UL absolutely, then determine what its location should be.
I put this in the onresize event, so that the location will remain correct when the user makes the window wider or narrower.
window.onresize = function() {
var cenUL = document.querySelector('.navbar-default .navbar-collapse ul.navbar-center li:last-child');
var rightUL = document.querySelector('.navbar-default .navbar-collapse ul.navbar-right li:first-child');
var newUL = document.getElementById('new');
newUL.style.left = ((cenUL.offsetLeft+cenUL.offsetWidth+rightUL.offsetLeft-newUL.offsetWidth)/2)+'px';
};
window.onresize();
.navbar-nav.navbar-center {
float: none;
text-align: center;
font-size: 0;
}
.navbar-nav.navbar-center > li {
vertical-align: top;
display: inline-block;
float: none;
font-size: 1.3rem;
}
#new {
position:absolute;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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 tabs">
<li>
MyWebsite
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
Menu
</li>
</ul>
<ul id="new" class="nav navbar-nav">
<li>NEW!</li>
</ul>
<ul class="nav navbar-nav navbar-center">
<li>
Company
</li>
<li>
Products
</li>
<li>
Contact
</li>
</ul>
</div>
</nav>
If you just need to make a area visible on xs, you can use bootstrap responsive classes
Bootply
HTML:
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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 tabs">
<li>
MyWebsite
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
Menu
</li>
</ul>
<ul class="nav navbar-nav navbar-right visible-xs"> // <-- HERE
<li>
New Group Item 1
</li>
<li>
New Group Item 2
</li>
</ul>
<ul class="nav navbar-nav navbar-center">
<li>
Company
</li>
<li>
Products
</li>
<li>
Contact
</li>
</ul>
</div>
</nav>
What does my css need to look like in order to change the color of the nav links to white?
Here is my code
<div class="col-sm-12">
<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>
<a class="navbar-brand" href="index.html">Tile Works</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Services</li>
<li>Photo Gallery</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</nav>
</div>
You can use css code like below:
.navbar-collapse .navbar-nav li a {
color: white;
}
I tried and it works.
.navbar-inverse .navbar-nav>li a {color:#fff;}
you can try this
.collapse navbar-collapse.nav navbar-nav > li > a {
color: #777;
}
Hope it helps
So, by default Bootstrap show logo on left corner, but on resizing it is still on the left. I want to put it in the middle to make it nicer display.
Image of what i have:
What i have
Image of what i want to be displayed:
What i want
I have this code to display Bootstrap menu in Wordpress:
<header>
<div class="menu">
<nav class="navbar navbar-default navbar-static-top">
<div class="container" id="menu2">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu1">
<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="<?php echo esc_url( home_url( '/' ) ); ?>">
<img alt="Logo" src="<?php bloginfo('template_url');?>/img/logo.png">
</a>
</div>
<div class="navbar-collapse collapse col-md-9" id="menu1">
<?php wp_nav_menu(array(
'theme_location' => 'primary',
'container' => false,
'menu_class' => 'nav navbar-nav navbar-right'));
?>
</div>
</nav>
</div>
</header>
I tried text-align:center, but it only works for links, not for logo
You can rewrite a different layout for your header with logo in the center and make use of bootstrap helper classes making visible the appropriate header. for your reference. http://getbootstrap.com/css/#responsive-utilities
Another approach is to play with offsets
http://getbootstrap.com/css/#grid-offsetting
Ok, i solved the problem by adding this:
#media (min-width:768px) {
.navbar .navbar-nav {
display: inline-block;
float: none;
}
.navbar-brand{
display: inline-block;
float: none !important;
}
.navbar .navbar-collapse {
text-align: center;
margin: 0 auto;
}
.navbar-nav > li {
display: inline-block;
float:none;
}
}
#media(max-width:1200px) {
.navbar-header {
text-align: center;
margin: 10px;
float: none !important;
}
}
Now the brand logo is centered when there is no space and links go down.
I also created clean Bootstrap navbar example without Wordpress for another users who want to see how it works (run and display it on full screen and resize window to see effect):
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style>
#media (min-width:768px) {
.navbar .navbar-nav {
display: inline-block;
float: none;
}
.navbar-brand{
display: inline-block;
float: none !important;
}
.navbar .navbar-collapse {
text-align: center;
margin: 0 auto;
}
.navbar-nav > li {
display: inline-block;
float:none;
}
}
#media(max-width:1200px) {
.navbar-header {
text-align: center;
margin: 10px;
float: none !important;
}
}
</style>
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<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="#">Brand</a>
</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 class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header>
</body>
</html>
I am trying to change the bootstrap navbar dropdown link's color when clicked or selected. Right now it changes to the specified color for a split second, and then just switches back to the default gray. Here is my CSS:
li.dropdown:active {
background-color: teal;
}
The drop down:
<li class="dropdown">
<span class="nav-text">Office Info</span> <span class="caret"></span>
<ul class="dropdown-menu">
<li>FAQ</li>
<li>Privacy</li>
<li>Health Links</li>
</ul>
</li>
Try this.
.navbar .navbar-nav > li.open > a:hover,
.navbar .navbar-nav > li.open > a:focus {
background-color: teal;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<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="#">Brand</a>
</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>Link <span class="sr-only">(current)</span>
</li>
<li>Link
</li>
<li class="dropdown"> Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
try
.dropdown ~ li a:hover{
background-color: teal;
}
the ~ is a tilde the css general sibling select