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.
Asked
Active
Viewed 7,937 times
12
-
Go to utilities > initial variables. Look for // Responsiveness at line 46. You can see and change the breakpoints listed below. – sol Feb 16 '18 at 21:40
-
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. – aviattor Feb 17 '18 at 17:28
-
Why not just write some custom media queries then? – sol Feb 17 '18 at 20:14
4 Answers
8
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";
Alex C
- 1,002
- 8
- 5
-
Styling seems to be buggy. I see the same behavior as this issue (and I'm on Bulma 0.7.5): https://github.com/jgthms/bulma/issues/2334 – charles-allen May 19 '20 at 16:13
-
Works for me in Bulma 0.9.1. Don´t forget to import bulma initia-variables.sass – O. Schnieders Oct 22 '20 at 17:57
4
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
Vidar
- 1,008
- 14
- 16
2
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.
Andy Bogdan
- 21
- 1
1
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.
Tomi Mickelsson
- 199
- 2
- 2