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.

Uzzi

Go to utilities > initial variables. Look for // Responsiveness at line 46. You can see and change the breakpoints listed below. – Plantation

Thanks that's one way of doing that but it affects the breakpoints on the entire site. What i am looking for is a way to have the mobile nav active for screens below 768px. It's currently active till 1024px. – Uzzi

Why not just write some custom media queries then? – Plantation

Answer 1

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";

Deprecate

Styling seems to be buggy. I see the same behavior as this issue (and I'm on Bulma 0.7.5): github.com/jgthms/bulma/issues/2334 – Quinn

Works for me in Bulma 0.9.1. Don´t forget to import bulma initia-variables.sass – Suzan

Answer 2

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

Animalism

Answer 3

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.

Pantheas

Answer 4

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.

Avowal