Full length navbar - html

Question

I want my navbar to span the entire width like this www.ramenchicago.com but right now i can only get it all on the right.
I have my css set up like this
.navbar-wrapper > .container {
padding-right: 0;
padding-left: 0;
width: 100%;
}
.navbar-wrapper .navbar {
padding-right: 15px;
padding-left: 15px;
width: 100%;
background-color: rgba(0,0,0,0.8);
}
li {
border-left: solid 1px white;
}
li:hover {
background: rgba(0,0,0,0.3);
}
#navbar {
display: table-row;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="navbar-wrapper">
<div class="container">
<nav class="navbar navbar-inverse navbar-static-top">
<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>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li class="dropdown">
ABOUT<span class="caret"></span>
<ul class="dropdown-menu">
<li>LOCATION</li>
<li>PRESS</li>
</ul>
</li>
<li>STRINGS 1</li>
<li>STRINGS 2</li>
<li>HELL RAMEN</li>
<li>JOBS</li>
<li>DARK CHEFS</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
Should I change my ul or li? Please help me out!
Also, it's my first time using Bootstrap so I'm not familiar with it yet. How do I remove the little arrow on the dropdown menu?
Thanks!

Answer 1

Set ul width to 100%
.navbar-nav {
float: left;
margin: 0;
width: 100%;
}
and it's li as 100% divide by number of li it has. You have 7 li, So it will be width: 14%; like this
.navbar-nav>li {
float: left;
text-align: center;
width: 14%; /* 100 divide by 7 li = 14 */
}
For the arrow on dropdown, Just remove <span class="caret"></span> there.
.navbar-wrapper > .container {
padding-right: 0;
padding-left: 0;
width: 100%;
}
.navbar-wrapper .navbar {
padding-right: 15px;
padding-left: 15px;
width: 100%;
background-color: rgba(0,0,0,0.8);
}
.navbar-nav {
float: left;
margin: 0;
width: 100%;
}
.navbar-nav>li {
float: left;
text-align: center;
width: 14%; /* 100 divide by 7 li = 14 */
}
li {
border-left: solid 1px white;
}
li:first-child{
border: 0;
}
li:hover {
background: rgba(0,0,0,0.3);
}
#navbar {
display: table-row;
}
<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.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="navbar-wrapper">
<div class="container">
<nav class="navbar navbar-inverse navbar-static-top">
<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>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li class="dropdown">
ABOUT
<ul class="dropdown-menu">
<li>LOCATION</li>
<li>PRESS</li>
</ul>
</li>
<li>STRINGS 1</li>
<li>STRINGS 2</li>
<li>HELL RAMEN</li>
<li>JOBS</li>
<li>DARK CHEFS</li>
</ul>
</div>
</div>
</nav>
</div>
</div>

Answer 2

You shouldn't need to nest containers and if you change your display properties to a table format you should see the results you're looking for.
.navbar-nav {
display: table;
width: 100%;
}
.navbar-nav > li {
display: table-cell;
float: none;
}
.navbar-nav > li > a {
text-align: center;
}
*Note: I would place these inside a media query so it doesn't disturb your mobile navigation.
See working examples.
Full width of the browser
#media (min-width: 768px) {
.navbar-wrapper .container-fluid {
padding-right: 0;
padding-left: 0;
width: 100%;
}
.navbar-wrapper .navbar.navbar-inverse .navbar-nav {
display: table;
width: 100%;
}
.navbar-wrapper .navbar.navbar-inverse .navbar-nav > li {
display: table-cell;
float: none;
}
.navbar-wrapper .navbar.navbar-inverse .navbar-nav > li > a {
text-align: center;
}
}
.navbar-wrapper .navbar {
background-color: rgba(0, 0, 0, 0.8);
}
.navbar-wrapper .navbar.navbar-inverse .navbar-nav > li {
border-left: solid 1px white;
}
.navbar-wrapper .navbar.navbar-inverse .navbar-nav > li:hover {
background: rgba(0, 0, 0, 0.3);
}
<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="navbar-wrapper">
<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="#navbar" 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>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">HOME
</li>
<li class="dropdown">
ABOUT<span class="caret"></span>
<ul class="dropdown-menu">
<li>LOCATION
</li>
<li>PRESS
</li>
</ul>
</li>
<li>STRINGS 1
</li>
<li>STRINGS 2
</li>
<li>HELL RAMEN
</li>
<li>JOBS
</li>
<li>DARK CHEFS
</li>
</ul>
</div>
</div>
</nav>
</div>
Alternative: Full width of a container
#media (min-width: 768px) {
.navbar-wrapper .navbar.navbar-inverse .navbar-nav {
display: table;
width: 100%;
}
.navbar-wrapper .navbar.navbar-inverse .navbar-nav > li {
display: table-cell;
float: none;
}
.navbar-wrapper .navbar.navbar-inverse .navbar-nav > li > a {
text-align: center;
}
}
.navbar-wrapper .navbar {
background-color: rgba(0, 0, 0, 0.8);
}
.navbar-wrapper .navbar.navbar-inverse .navbar-nav > li {
border-left: solid 1px white;
}
.navbar-wrapper .navbar.navbar-inverse .navbar-nav > li:hover {
background: rgba(0, 0, 0, 0.3);
}
<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="navbar-wrapper">
<div class="container">
<nav class="navbar navbar-inverse navbar-static-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" 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>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">HOME
</li>
<li class="dropdown">
ABOUT<span class="caret"></span>
<ul class="dropdown-menu">
<li>LOCATION
</li>
<li>PRESS
</li>
</ul>
</li>
<li>STRINGS 1
</li>
<li>STRINGS 2
</li>
<li>HELL RAMEN
</li>
<li>JOBS
</li>
<li>DARK CHEFS
</li>
</ul>
</div>
</nav>
</div>
</div>