Search code examples
htmlcssnavbarbulma

Bulma centered navbar mobile issues

I'm creating a navbar for a current project in react (create-react-app). I'm using the Bulma framework for all css-related things. The current problem lies in the navigation bar, the elements of which should together be centered and visible on mobile.

While this isn't possible with Bulma alone, I used some scss modifications I've found to make it somewhat work:

Stylesheets

.navbar-start { // fixes is-expanded on the navbar items
    flex-grow: 1;
    flex-shrink: 1;
    display: flex;
    text-align: center;
}

.navbar-item {
    border-style: solid;
    border-color: black;
    border-width: medium;
}

#center-item {
    border-right-width: 0;
    border-left-width: 0;
}

HTML (navbar only)

<div>
  <nav className="navbar is-dark" role="navigation" aria-label="main navigation">
    <div className="container has-text-centered ">
      <div className="navbar-menu">
        <div className="navbar-start">
          <Link className="navbar-item is-expanded has-text-weight-semibold is-size-5" to="/">/home</Link>
          <Link id="center-item" className="navbar-item is-expanded has-text-weight-semibold is-size-5" to="/visual">/visual</Link>
          <Link className="navbar-item is-expanded has-text-weight-semibold is-size-5" to="/about">/about</Link>
        </div>
      </div>
    </div>
  </nav>
</div>

Finally, to make this horizontal navbar visible on mobile, I've also modified a bulma variable according to this in the scss file.: $navbar-breakpoint: 0.

In the end, the issue is the following:enter image description here

This is on an iPhone 7. I haven't been able to reproduce it on desktop Firefox by resizing the window. For further examination, you can use this is the live version of the site: http://51.15.246.99/. I've tried many things in fixing this issue so any help would be appreciated.

Solution

  • The solution to the issue is somewhat hacky. After posting about it on GitHub's issue page for Bulma and after some careful on-device debugging the issue turned out to be caused by this (abridged) css rule in Bulma:

    .navbar-menu {
    margin-right: -0.75rem;
}

    In quoting the creator of the framework "It's to align the navbar container with the other containers. But it should only exist on desktop". It existed on mobile as I've set the navbar-breakpoint to 0. The fix was to just include this in my custom css:

    .navbar-menu {
    margin-right: 0 !important;
}

    GitHub issue: https://github.com/jgthms/bulma/issues/3055