How to horizontally center all items in bulma navbar?

Question

By default bulma css framework left aligns all items in the navbar. However that's very inconvenient for big displays.

Having this html layout (as per bulma's documentation):

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
</head>

<body>
  <div class="navigation">
    <nav class="navbar" role="navigation" aria-label="main navigation">
      <div class="navbar-brand">
        <a class="navbar-item" href="http://localhost:8000">
          <img src="https://bulma.io/images/bulma-logo.png" width="50">
        </a>
        <a class="navbar-item" href="http://localhost:8000">Sitename</a>
        <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navMenu">
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
        </a>
      </div>
      <div class="navbar-menu" id="navMenu">
        <div class="navbar-start">
          <a class="navbar-item" href="/link1.html">link 1</a>
          <a class="navbar-item" href="/link2.html">link 2</a>
          <a class="navbar-item" href="/link3.html">link 3</a>
          <a class="navbar-item" href="/link4.hmlt">link 4</a>
        </div>
      </div>
    </nav>
  </div>
</body>

Produces:

Expected output:

Adding additional css:

.navbar {
  align-content: center;
  justify-content: center;
}

Doesn't seem to be enough.

Jsfiddle link: https://jsfiddle.net/q6j9Lyf2/1/

`.navbar-menu { flex-grow: 0!important; }` – Temani Afif Oct 10 '21 at 09:15 — Temani Afif, Oct 10 '21 at 09:15

moshfiqrony · Accepted Answer · 2021-10-10T09:52:21.900

2

Your style written in .navbar class won't apply until unless you add display: flex

.navbar {
  display: flex
  align-content: center;
  justify-content: center;
}

also you have to add

.navbar-menu {
    flex-grow: initial!important;
    flex-shrink: initial!important;
}

Don't like using !important write like this

.navbar .navbar-menu {
    flex-grow: initial;
    flex-shrink: initial;
}

edited Oct 10 '21 at 09:52

answered Oct 10 '21 at 08:56

moshfiqrony

4,303
2
20
29

Doesn't seem to be working https://jsfiddle.net/q6j9Lyf2/2/ or did I miss something? – Granitosaurus Oct 10 '21 at 09:04
1

Updated the answer. We need to add !important – moshfiqrony Oct 10 '21 at 09:07
Thanks! I'm not a fan of using `!important` but this time around it seems to be required. – Granitosaurus Oct 10 '21 at 09:31
2

We could do that without important. Just we have to access it under parent classes. – moshfiqrony Oct 10 '21 at 09:47

score 0 · Answer 2 · answered Oct 10 '21 at 08:55

0

have you tried this:

.navbar{
    display:flex;
    align-items:center;
}

answered Oct 10 '21 at 08:55

Ctac

99
1
2
8

How to horizontally center all items in bulma navbar?

2 Answers2