Non Responsive Bulma Nav

Question

I am using Bulma, I have a need to make the navigation bar, non responsive. I do not want the hamburger menu or the collapsed nav.

I cannot work out how to do this though, there is no mention in the docs.

Bootstrap had a class you could add that would support this, is it possible with Bulma?

Answer 1

According to the docs, .navbar-menu is the class responsible for hiding the navigation bar on mobile. One solution would be to not use that class. Many Bulma items, like the nav bar, have elements that are optional. You may omit the .navbar-menu and .navbar-burger elements and it will still work. See example below.

If you have navigation elements that are dropdowns, you may have to write a bit of CSS to correct it for mobile. Otherwise look into using the dropdown component: https://bulma.io/documentation/components/dropdown/

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css" rel="stylesheet"/>
    <nav class="navbar" role="navigation" aria-label="main navigation">
      <div class="navbar-brand">
        <a class="navbar-item" href="https://bulma.io">
          <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
        </a>

        
      
          <a class="navbar-item">
            Home
          </a>

          <a class="navbar-item">
            Documentation
          </a>

    </div>
    </nav>