How do I center my Navbar?

Question

I looked on here before, but nothing really worked. I am using Bulma Framework which I believe is relatively unheard of, yet I was hoping you could help me center the brand link on the navbar. This is what I have it at right now:

.navbar {
  background-color: #0a0a0a;
  color: white;
  height: 9%;
}

.navbar .navbar-brand > .navbar-item,
.navbar .navbar-brand .navbar-link {
  color: white;
  font-family: 'Wavehaus';
}

I have a link on Codepen so that it can be visualized:

https://codepen.io/anon/pen/BwrWwg

Note that the font will not show up.

Solution 1

You just need to set the right display for the navbar. Currently, Bulma makes use of Flex Layout. Now clearing the flex and making it use block will make it work:

.navbar .navbar-brand {
  text-align: center;
  display: block;
  width: 100%;
}

.navbar .navbar-brand > .navbar-item,
.navbar .navbar-brand .navbar-link {
  display: inline-block;
}

Solution 2

.navbar {
  background-color: #0a0a0a;
  color: white;
  height: 9%;
  display:flex;
  justify-content:center;
}

Solution 3

Well, Bulma is using flex. You could try adding another navbar item after logo if you want to keep the logo

< a class="navbar-item center">Table of Content</a>

And then you can change the flex property of this item (only this item) to

.navbar-item.center {
    flex-grow: 1;
    flex-direction: column;
    justify-content: center;
}

So that this item occupies the rest of the spaces. Seems working for me.

Comments

[Andrew Chon]

There you go. Accepted

[Praveen Kumar Purushothaman]

@AndrewChon There you go... Got some nice points... :D Happy Stack Overflowing.