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.
Related
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>
I tried all way css style to keep the menu items in class nav nav-bar bootstrap staying horizontal on small screen device.
The Bootstrap menu like below:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<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>
When I resize the browser or open on my iPhone mobile, the item menu stack over one another. Even though, I tried to use bootstrap class list-inline of bootstrap, it still does not work.
How can I do to achieve, the above purpose? Thanks.
Just set the display: inline-block to the nav li elements.
Stack Snippet
.navbar-default .navbar-nav>li {
display: inline-block;
}
<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.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<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 should probably use the visible-xs-inline class. This sets the display: inline-block style on mobile devices.
You can add this rule to override the class which defines display: block for the li elements in the navbar as a default:
ul.nav > li {
display: inline-block;
}
ul.nav>li {
display: inline-block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<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 need to specify the the col-xs for small screens. If you want the 4 li objects on the same line they should be 3 columns each.
<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.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="active col-xs-3">Home</li>
<li class="col-xs-3">Page 1</li>
<li class="col-xs-3">Page 2</li>
<li class="col-xs-3">Page 3</li>
</ul>
</div>
</nav>
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>
I'm trying to make it where all links within the navbar are centered and if I had more links they will automatically be centered as well.
HTML:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li>ABOUT</li>
<li>SHOP</li>
</ul>
</div>
</nav>
Do you want you navbar to look like this??
<div class="container">
<header>
<nav class="navbar navbar-inverse">
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li>ABOUT</li>
<li>SHOP</li>
</ul>
</nav>
</header>
</div>
May this helps you in understanding more.. http://www.bootply.com/CSI2KcCoEM
.navbar-brand
{
position: absolute;
width: 100%;
left: 0;
text-align: center;
margin:0 auto;
}
.navbar-toggle {
z-index:3;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<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"></script>
<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">
<li class="navbar-left">Left 1</li>
<li class="navbar-left">Left 2</li>
<li class="active">Center 1</li>
<li>Center 2</li>
<li>Center 3</li>
<li class="navbar-right">Right 2</li>
<li class="navbar-right">Right 1</li>
</ul>
</div>
</nav>
You can center your element setting giving ul the property of display:inline-block; and margin:0 auto; and then text-align:center; to its parent element
.navbar-nav{
float:none !important;
margin:0 auto;
display:inline-block;
}
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid" style="text-align:center"> <!--- added text-align center --->
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li>ABOUT</li>
<li>SHOP</li>
</ul>
</div>
</nav>
DEMO
You can use : Class="Center-block"
<div class="container-fluid" class="Center-block">
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li>ABOUT</li>
<li>SHOP</li>
</ul>
</div>
Try this:
Make ul text-align:center; & add display: inline-block; to li a
I need a navbar which is semi transparent over the background image.
Logo on left side and menu on right-side which should be equally spaced between list items.Something like -
https://getbootstrap.com/examples/cover/
http://bootsnipp.com/snippets/featured/full-screen-background-cover-page
I tried giving float:right to my <ul> element of menulist, it goes to the right extreme.
HTML
<body>
<nav>
<ul style="float:right;">
<li style="display:inline;">item1</li>
<li style="display:inline;">item2</li>
<li style="display:inline;">item3</li>
<li style="display:inline;">item4</li>
</ul>
</nav>
</body>
CSS
body {
background-image:url("giphy.gif");
background-repeat: no-repeat;
background-size: cover;
overflow-x:hidden;
}
nav {
height:60px;
width:100%;
overflow-y:hidden;
overflow-x:hidden;
z-index:1;
background-color: transparent;
}
Using Bootstrap css, You can do it as
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Your LOGO here.</a>
</div>
<ul class="nav navbar-nav" style="float:right">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
</body>
Hope this helps!