Boostrap menu fill the width - html

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>

Related

How to remove unwanted whitespace below nav?

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>

how do i make the 5th and 6th li a left aligned using css

I am trying bootstrap to make a navbar .I am struggling to make the login and logout right aligned .how could i do it???i have uploaded the html and css code
Html code:
<body>
<nav class="navbar navbar-inverse">
<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>
<li>Log-out</li>
<li>Log-in</li>
</ul>
</div>
</nav>
<div class="container">
<h3>Inverted Navbar</h3>
<p>An inverted navbar is black instead of gray.</p>
</div>
</body>
CSS code:
<style>
.navbar navbar-inverse .nav navbar-nav ul li a:nth-child(5):nth-child(6)
{
background-color:green;
float :right;
}
</style>

It's the<li> that's 5th and 6th and not <a>. Also, your selector is wrong in CSS (there's no <navbar-inverse> tag, which is what you meant). Kindly correct it:
.navbar.navbar-inverse ul.nav.navbar-nav li:nth-child(5) a,
.navbar.navbar-inverse ul.nav.navbar-nav li:nth-child(6) a {
background-color: green;
float: right;
}
Snippet
.navbar.navbar-inverse ul.nav.navbar-nav li:nth-child(5) a,
.navbar.navbar-inverse ul.nav.navbar-nav li:nth-child(6) a {
background-color: green;
float: right;
}
<nav class="navbar navbar-inverse">
<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>
<li>Log-out</li>
<li>Log-in</li>
</ul>
</div>
</nav>
Preview

You need to select the nth li, not the nth a, because there is always only one a.
.navbar-nav > li:nth-child( 5 ),
.navbar-nav > li:nth-child( 6 ) {
text-align: right;
}
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Log-out</li>
<li>Log-in</li>
</ul>

I found that you need to do several things to get this working:
1) Use float:right; on the 5th and 6th Li elements,
2) In your case it is floating right within the UL but the UL is not the full width of the nav bar. To correct this adjust the UL to be full width of the nav bar.
I have implemented the solutions users have suggested above on Code Pen and none work in your situation until you adjust the width of the UL, take a look:
.nav{
width:100%;
}
https://codepen.io/anon/pen/EvZXJM

How can I center my bootstrap navbar in CSS?

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

How to centralize the items in bootstrap fixed navigation bar?

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.

Trying to select link on navbar and show that it's active

I would like to click "Page 1" on the top navbar on the following link, which would make the "Page 1" value on the filter bar active and highlighted. How can I do this?
Please see the jfiddle example: https://jsfiddle.net/qtcz2guk/1/
JavaScript
$('.nav a').click(function(){
$(this).parent().addClass('active').siblings().removeClass('active');
});
CSS
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #d65c14;
background: #000;
}
HTML
<title>Bootstrap Case</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="active">WebSiteName</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
<div class="container">
<h3>
<p>A navigation bar is placed at the top of the page.</p>
<p>A filter bar is placed in the middle of the page.</p>
<p>Question: How can i make this work so that clicking "Page 1" on the top navbar makes the filter bar "Page 1" to be active and highlighted?</p>
</h3>
</div>
<div class="container">
<div id="menu" class="navbar navbar-default navbar-custom">
<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="javascript:void(0)" onclick="myFunctionall(); return false">FILTER BY /</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<ul class="nav navbar-nav navbar-right">
</ul>
</div>
</div>
</div>
</body>