Nav bar won't center in Bootstrap 3 - html

Question

I'm sorry for asking this question, but I've search through stack overflow for weeks and haven't been able to rectify my problem. My nav bar is left justified; I need it to center. I have tried applying margin: 0px auto; to every element within the hierarchy of the <nav> along with text-align: center; but nothing is centering it.
It's a Bootstrap 3 framework. Here's the code and my external CSS in addition to the bootstrap.min.css file:
.navbar {
margin-bottom: 0;
border-radius: 0;
}
.row.content {
height: 450px
}
.sidenav {
padding-top: 20px;
background-color: #f1f1f1;
height: 100%;
}
footer {
background-color: #555;
color: white;
padding: 15px;
font-family: "IM Fell DW Pica", serif;
font-size: 18px;
}
#media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {
height: auto;
}
}
#banner-img {
margin: 0px auto;
}
header {
background-color: #394650;
/* background color of header */
}
nav {
font-family: "IM Fell DW Pica", serif;
/* font style of nav bar */
font-size: 23px;
/* font size of nav bar */
}
#myNavBar ul li {
text-align: center;
}
/* FOR SMALL SCREENS */
#media screen and (max-width: 767px) {
nav {
font-size: 40px;
/* changes font size on smaller screens */
}
/* sets dimensions for embedded video on small screens */
#intro-video-div {
height: auto;
width: auto;
}
section h1 {
font-size: 40px;
}
section p {
font-size: 25px;
}
}
/* FOR BIG SCREENS */
#media screen and (min-width: 768px) {
/* sets dimensions for embedded video on larger screens */
#intro-video-div {
width: 560px;
height: 315px;
}
section h1 {
font-size: 36px;
}
section p {
font-size: 20px;
}
#content-ads-holding-div {
height: 750px;
}
.img-responsive {
margin: auto;
}
}
section,
h1,
p {
font-family: "IM Fell DW Pica", serif;
text-align: center;
position: static;
}
#intro-video-div {
margin: 0px auto;
position: static;
text-align: center;
}
#intro-video {
width: 100%;
height: 100%;
}
#nav-div-center,
#nav-ul {
margin: 0px auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse">
<div class="container-fluid" id="navbar-container">
<div class="collapse navbar-collapse" id="myNavbar">
<div id="nav-div-center">
<ul class="nav navbar-nav" id="nav-ul">
<li class="active" id="home">Home</li>
<li id="episodes">Episodes</li>
<li id="research">Research</li>
<li id="store">Store</li>
<li id="support">Support</li>
<li id="communicate">Communicate</li>
<li id="affiliations">Affiliations</li>
</ul>
</div>
</div>
</div>
</nav>
<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>
You can see the actual website at http://www.kspavia.com/bootstrap.php

Answer 1

try the below css to make navbar center.
#media (min-width: 768px){
.navbar-nav{
margin: 0 auto;
float: none;
display: table;
}
}

Answer 2

If you want to center the navigation you need to assign a width. A block level element will always expand as wide as it can.
#nav-ul {
max-width: 780px;
}

Answer 3

Depending on what you ultimately want to do (justify the links across the nav or center in the links in the nav) you simple have to change the display and float properties to do either.
Note: I adjusted the font size above 768px to prevent any links from overflowing on a reduced viewport.
Here are two working examples. View at FullPage.
Distributed (justified) Links Example:
.navbar.navbar-inverse {
margin-bottom: 0;
font-family: "IM Fell DW Pica", serif;
font-size: 22px;
}
/*Distributed Links Starts*/
#media (min-width: 768px) {
.navbar.navbar-inverse .navbar-nav {
display: table;
width: 100%;
}
.navbar.navbar-inverse .navbar-nav > li {
display: table-cell;
float: none;
}
.navbar.navbar-inverse .navbar-nav > li > a {
text-align: center;
}
.navbar.navbar-inverse > .container-fluid {
margin-right: 0;
margin-left: 0;
padding-left: 0;
padding-right: 0;
}
}
/*Distributed Links Ends*/
#media screen and (max-width: 767px) {
.navbar.navbar-inverse .navbar-nav > li > a {
font-size: 40px;
padding: 20px 15px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<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="#myNavbar" 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 class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active" id="home">Home
</li>
<li id="episodes">Episodes
</li>
<li id="research">Research
</li>
<li id="store">Store
</li>
<li id="support">Support
</li>
<li id="communicate">Communicate
</li>
<li id="affiliations">Affiliations
</li>
</ul>
</div>
</div>
</nav>
<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>
Center Links Example:
.navbar.navbar-inverse {
margin-bottom: 0;
font-family: "IM Fell DW Pica", serif;
font-size: 18px;
}
/*Centered Links Starts*/
#media (min-width: 768px) {
.navbar.navbar-inverse .navbar-nav {
width: 100%;
text-align: center;
}
.navbar.navbar-inverse .navbar-nav > li {
display: inline-block;
float: none;
}
}
/*Centered Links Ends*/
#media screen and (max-width: 767px) {
.navbar.navbar-inverse .navbar-nav > li > a {
font-size: 40px;
padding: 20px 15px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<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="#myNavbar" 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 class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active" id="home">Home
</li>
<li id="episodes">Episodes
</li>
<li id="research">Research
</li>
<li id="store">Store
</li>
<li id="support">Support
</li>
<li id="communicate">Communicate
</li>
<li id="affiliations">Affiliations
</li>
</ul>
</div>
</div>
</nav>
<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>

Answer 4

if you want to make your navigation center aligned. Just update your existing css second-bootstrap-stylesheet.css line no 119 as per below css:-
#nav-div-center, #nav-ul {
width: 78%;
float: none;
}

Answer 5

You can just use .container instead of .container-fluid if you want .navbar block to be on center or use apply styles:
#media (min-width: 768px){
.navbar-nav {
float: none;
text-align: center;
}
.navbar-nav > li {
display: inline-block;
float: none;
}
}