Bulma centered navbar mobile issues

[karipov]

This is about Bulma. I need help with what is possibly a bug. I've been able to reproduce it only on mobile Safari

Overview of the problem

I'm using Bulma version [0.8.2] My browser is: Safari iOS (iPhone 7)

Description

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:

Steps to Reproduce

App.scss 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.

Actual behavior

Expected behavior

There should be no empty space.

Additional details

Live website: http://51.15.246.99 Project source code: https://github.com/visual-cs/site

[karipov]

After some debugging on-device, I've seem to have found the issue. The stylesheet on .navbar-menu shows a margin-right: -0.75rem. What's that for?

[jgthms]

It's to align the navbar container with the other containers. But it should only exist on desktop:

It seems you have changed the desktop breakpoint to 0?

[karipov]

Yes, @jgthms the navbar element features a $navbar-breakpoint variable which I have set to 0 so that I could have its elements visible even on mobile. Would you know if there's any way to approach my problem with a better solution than just overriding this css variable?

[jgthms]

I see. There is no workaround I can think of right now. But now that I think about it, there is probably a better way to have the same effect on desktop but without the negative margin. I might fix that.

[karipov]

Alright, I'll have my hack for now then. But please consider as what has caused this problem has also been referenced as a 'fix' in some other issue threads here: #1445

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.