Zenn
🍰

Bulma で Navbar のメニューを中央寄せする

2024/11/01に公開
CSS
HTML
bulma
tech

Bulma を使用して Web サイトを構築している際にタイトルのところで詰まったので備忘録として残します。

作りたかったもの

こういうやつです。
ブランドロゴが最も左側にあって、右側にまたアイテムがあって中央にメニューがおいてある感じのやつです。

前提

最初は以下のように実装していました。

<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item" href="/">
      <img id="brand-image" src="./assets/logo.png" alt="logo" />
    </a>
  </div>

  <div class="navbar-menu">
    <div class="navbar-item">About</div>
    <div class="navbar-item">Custom</div>
    <div class="navbar-item">Contact</div>
  </div>

  <div class="navbar-end">
    <div class="navbar-item">
      <button id="login" class="button is-medium is-link is-rounded">login</button>
    </div>
  </div>
</nav>

画像のようになります。
また、navbar-menu の class 名に navbar-start, navbar-end を付加することで、位置を調整することはできますが、中央寄せはできません。

navbar-start と style を追加する

結論です。
公式リポジトリで中央寄せの class 追加を提案する issue が開かれており、そちらに解決策がのっていました。

https://github.com/jgthms/bulma/issues/1604

navbar-menu に、class="navbar-start" style="flex-grow:1;justify-content: center;"を追加することで中央寄せすることができました。

      <div class="navbar-menu">
        <div class="navbar-start" style="flex-grow:1;justify-content: center;">
          <div class="navbar-item">About</div>
          <div class="navbar-item">Custom</div>
          <div class="navbar-item">Contact</div>
        </div>  
      </div>

以下は navigation bar 全体のコードです。

  <nav class="navbar" role="navigation" aria-label="main navigation">
      <div class="navbar-brand">
        <a class="navbar-item" href="/">
          <img id="brand-image" src="./assets/ロゴ.png" alt="logo" />
        </a>
      </div>
    
      <div class="navbar-menu">
        <div class="navbar-start" style="flex-grow:1;justify-content: center;">
          <div class="navbar-item">About</div>
          <div class="navbar-item">Custom</div>
          <div class="navbar-item">Contact</div>
        </div>
        
      </div>
    
      <div class="navbar-end">
        <div class="navbar-item">
          <button id="login" class="button is-medium is-link is-rounded">login</button>
        </div>
      </div>
  </nav>

注意

Window の横幅から navbar-brand と navbar-end の幅を引いたサイズから中央に配置しているので、navbar-brand と navbar-end のサイズの差によっては、中央に完全な中央寄せにならないことに注意！

参考

https://bulma.io/documentation/components/navbar/
https://github.com/jgthms/bulma/issues/1604

Discussion