I am trying to remove the whitespace below this Bootstrap 3 navbar. I have tried setting margin-bottom to zero for the nav, and I have tried to do vertical-align: middle to both divs.
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
<div class="container-fluid">
Home
</div>
Setting a margin-bottom is the right way to go about it, you just need to increase the specificity of your css selector if your css is declared before your bootstrap link. One way to increase your selector specificity is by using nav.navbar as your selector.
See working example below:
nav.navbar {
margin-bottom: 0;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
<div class="container-fluid">
Home
</div>
Related
I am working a little exercise on codepen and trying to style the tabs of navbar using boostrap, but when I was using the original code on the site or adding
class="list-inline"
It ended up with the items on each line like this.
Can anyone explain why that happened? I am using boostrap 4 and here is my code:
<nav class="navbar navbar-default">
<div class="navbar-header">
Brand
</div>
<ul class="list-inline">
<li>Home</li>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</nav>
you would have to use list-inline-item class to the li item as well.
see the fiddle below
https://jsfiddle.net/pr6t58wL/
<nav class="navbar navbar-default">
<div class="navbar-header">
Brand
</div>
<ul class="list-inline">
<li class="list-inline-item">Home</li>
<li class="list-inline-item">Menu 1</li>
<li class="list-inline-item">Menu 2</li>
<li class="list-inline-item">Menu 3</li>
</ul>
</nav>
Please use this code I think it is work on your requirement.
<div id="exTab1" class="container">
<ul class="nav nav-pills">
<li class="active">
Overview
</li>
<li>Using nav-pills
</li>
</ul>
<div class="tab-content clearfix">
<div class="tab-pane active" id="youridname1">
<h3>Content's background color is the same for the tab</h3>
</div>
<div class="tab-pane" id="youridname1">
<h3>We use the class nav-pills instead of nav-tabs which automatically creates a background color for the tab</h3>
</div>
</div>
</div>
I need that the menu fills-in the width of its container instead of be left-aligned.
[LOGO A|B|C ]
[LOGO A | B | C ]
Here is my test code. My question is how to achieve it using bootstrap.
.navbar-brand{width: 405px;}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav table-responsive">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
You can use flex-box
.navbar-brand {
width: 405px;
}
#media screen and (min-width:768px) {
.navbar>.container-fluid {
display: flex;
}
ul.nav.navbar-nav {
flex: 1 1;
display: flex;
}
.navbar-nav>li {
flex: 1 1;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav table-responsive">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
Do you need something like this?
.navbar-nav {
display: flex;
width: 100%;
justify-content: space-between;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<ul class="nav navbar-nav table-responsive">
<li class="navbar-header"> <a class="navbar-brand" href="#">WebSiteName</a>
</li>
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
You need so set the .navbar-nav to float: right;, like this:
.navbar-nav {
float: right !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav table-responsive">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
Do you want something like this?
.navbar-header {width: 160px;}
.navbar-nav.table-responsive {
width: calc(100% - 160px);
border: 0;
margin-left: 0;
margin-right: 0;
display: flex;
flex-wrap: wrap;
}
.navbar-nav > li {
float: left;
flex-grow: 1;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header pull-left">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav pull-left table-responsive">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
In the floowing code, I have tried to set float:noneand centralizing techniques to push the items to the center of the navigation, but none has worked.
How can I have the items sit in the middle of the navigation bar?
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
You could do something like this:
.container-fluid{
text-align: center;
}
.navbar .navbar-nav {
display: inline-block;
float: none;
}
This will center the items of your navigation. If you want to try this out, check this JS Fiddle here.
I am using this navbar:
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</div>
</nav>
I am I'm trying to place the "Home" icon next to the word "Home" and place it in the same grey block, I am doing this:
<li class="active">Home<i class='glyphicon glyphicon-home'></i></li>
I have tried to place it in several places without success.
Thank you in advance.
Why not inside the anchor tag ?
<li class="active">
Home<i class='glyphicon glyphicon-home'></i>
</li>
Demo: http://jsfiddle.net/dhirajbodicherla/urnb1wha/
If you want the Home icon towards the extreme right use pull-right class to the glyphicon like this
<li class="active">
Home<i class='pull-right glyphicon glyphicon-home'></i>
</li>
Demo : http://jsfiddle.net/dhirajbodicherla/urnb1wha/1/
I'm using the newest version of Bootstrap, but not sure where to start fixing an issue with the navbar. The navbar looks right up until I decrease the width of the browser. The rest of bootstrap's components look fine with a resize, but the list items of the navbar get moved into a weird order. I looked into collapsing, but I think this may be an issue just of padding/width. I haven't made any edits to Bootstrap css. Any places to start?
<div class="container-fluid">
<div class="container-fluid" id="header">
<div class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<ul class="nav navbar-nav">
<a class="navbar-brand" href="#">
<img alt="Logo" src="./html/Images/logo.png" height="20" />
</a>
<a class="navbar-brand" href="./index.html">My Navbar</a>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</div><!-- /.container-fluid -->
</div>
</div>
Here's the fiddle: https://jsfiddle.net/y6k4jvv5/3/
add li tags around the two a tags and add css for the li to float left
<div class="container-fluid">
<div class="container-fluid" id="header">
<div class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li><a href="#">
<img alt="Logo" src="./html/Images/logo.png" height="20" />
</a></li>
<li>My Navbar</li>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</div><!-- /.container-fluid -->
</div>
</div>
li {
float: left;
}
https://jsfiddle.net/y6k4jvv5/4/