Bulma Navbar breakpoint

Question

I am using the Bulma framework for a project and the mobile menu is activated for max-width 1024px. I would like to have the mobile menu only activated when screen width is 769px or below. I have spent hours digging through the sass files and can't find how to override the default behavior.

Answer 1

On Bulma version 0.7.1 you can go to node_modules/bulma/sass/components/navbar.sass and then change +desktop to +tablet in 2 locations.

It will change the navbar to trigger at around 800px. You probably have to redo this when you install a new version, or you can fork it and install from git.

The Bulma guys are working on a fix for this, should be available soon: https://github.com/jgthms/bulma/issues/1042

Answer 2

Another easy way to have the navbar hamburger menu appear only in mobile screens is to generate a custom Bulma build at https://bulma-customizer.bstash.io

Open Components -> navbar.sass, and set the last option $navbar-breakpoint to $tablet.

I also think that Bulma default mobile breakpoint 768px has a off-by-one error: 768 should be the first tablet width, not 769. (iPad portrait has a width of 768px) I therefore also changed the $tablet variable at initial-variables.sass to 760px.

I recently did this for my blog https://tomicloud.com if you want to test it.

Answer 3

This has been fixed and works in 0.7.4

// Update Bulma's derived variables
@import "~bulma/sass/utilities/initial-variables.sass";
$navbar-breakpoint: $tablet;
@import "~bulma/bulma.sass";

Answer 4

In navbar.sass, I changed two things.

On line 236:

+desktop .navbar, .navbar-menu, .navbar-start, .navbar-end

I changed +desktop to +mobile

However, that still had some remnants of the styling when you open the hamburger menu.

So then I changed

On line 200, right before .navbar > .container display: block

I changed +touch to +mobile.