Add navbar-breakpoint variable to Bulma CSS framework

Turned out there wasn’t a good way to do it without having to override a lot of Bulma code.

… until this merge request got accepted!!!

Add and use $navbar-breakpoint variable; Fixes #1042

This fixes the problem of a hard-coded breakpoint for when the hamburger menu becomes a full menu.

This is an improvement; it gives Bulma users needed flexibility without requiring hacking, workarounds like redefining breakpoints that may have unwanted side effects, or code duplication.

Proposed solution

Replace hard-coded desktop/touch mixins with from/until mixins that take a new $navbar-breakpoint variable.

Fixes #1042

Now people bringing in Bulma with Sass or SCSS can do something like the following; in their main .scss file in this example:

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


None; it continues to work identically as before if no-one sets this variable.

Testing Done

I replaced Bulma in node_modules with a clone of my forked repository that has only this change, and it worked exactly as intended. Bulma provided all the tools to make this an easy modification; now everyone can have access to it.


mariozig commented 9 days ago

Nice PR! This fixes a year old issue and addresses at least 3 different stack overflow questions: