Daniel Glynn Goodwin Daniel Glynn Goodwin - 1 month ago 10
CSS Question

Bootstrap Centering Entire Navbar

So I've googled and tried to trouble-shoot this issue for the past hour and I'm starting to get slightly upset.

I need this navbar (which currently has the entire contents of it to the left): navbar left

to have all of its contents centered to look like this (made in paint, lol.): navbar center edit

The only solutions I have ever found to this are either having the nav links centered without the brand or the brand centered without the nav links.

HTML:

<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-header ">
<a class="navbar-brand" href="#">SOUND HAUS</a>
<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><a href="/articles" style="color:#fff;">ARTICLES</a></li>
<li><a href="/interviews" style="color:#c00618;">INTERVIEWS</a></li>
<li><a href="/gallery" style="color:#fff;">GALLERY</a></li>
<li><a href="/contact" style="color:#c00618;">CONTACT</a></li>
</ul>
</div>
</nav>


CSS:

.navbar {
font-family: Long Shot;
background-color: black;
z-index: 998;
}

.navbar-brand {
font-size: 50px;
margin-top: 20px;
color: white !important;
}

.navbar-nav {
margin-top: 20px;
font-size: 20px;
}


Thanks in advance!

Answer

You should put a container in the nav and then overwrite and add some css rules to bootstrap rules.

<style>
.container.nav{
  text-align:center
}
.navbar {
    font-family: Long Shot;
    background-color: black;
    z-index: 998;
}

@media (min-width: 768px){
.navbar-header{
  max-width: 400px;
  display: inline-block;
}

.navbar-header {
     float: none;
  }

}

@media (min-width: 768px){
.navbar-collapse.collapse{
  max-width: 600px;
  display: inline-block;
}

.navbar-collapse.collapse {
    display: inline-block !important;
  }
}


.navbar-brand {
    font-size: 50px;
    margin-top: 20px;
    color: white !important;
}

</style>


<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container nav">
      <div class="navbar-header ">
          <a class="navbar-brand" href="#">SOUND HAUS</a>
          <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><a href="/articles" style="color:#fff;">ARTICLES</a></li>
              <li><a href="/interviews" style="color:#c00618;">INTERVIEWS</a></li>
              <li><a href="/gallery" style="color:#fff;">GALLERY</a></li>
              <li><a href="/contact" style="color:#c00618;">CONTACT</a></li>
          </ul>
      </div>
      </div>
  </nav>

I added only the div class="container nav" Then some of the css rules had to be modified for dimensions bigger than 768px (if less the same remain). And this is a screenshot i made: enter image description here I hope i was helpful :)