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.

Sing

It was ONE tag, doesn't need a dislike or an edit. – Sing

Also you can use nav-center class – Aronson

Answer 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;
}

Gemmagemmate

There you go. Accepted – Sing

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

Answer 2

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

Edieedification

Answer 3

I don't know if its the case (maybe I understood it wrong), but you can add to navbard-brand property margin: auto

Warnke

Answer 4

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.

Receiptor