Edit the visibility of the navbar-burger

[nbapp]

Overview of the problem

This is about the Bulma CSS framework
I'm using Bulma 5.0.0

Description

I would like to show the hamburger menu only on a mobile device and from a tablet (769px and above) not. It does not seem possible to overwrite the default of a desktop.

[jgthms]

There could be a $navbar-breakpoint variable actually.

[emielmolenaar]

There could be a $navbar-breakpoint variable actually.

This would be very awesome.

[mydnic]

I'm developing a kind of web-based app for a tablet screen and my temporary fix is to declare
$desktop: 769px;

[lukepighetti]

This is desperately needed. I am of the opinion that hamburgers belong only on phones and my plate.

[thatwill]

I implemented a $navbar-breakpoint variable in my case; I just changed the use of the touch/desktop mixins to new mixins which use the new variable. I could submit a PR if needed, but it seems pretty trivial.

[alxmagro]

What is the solution to this today?

[lukepighetti]

I punch this into every Bulma project now and it works 👍

//$gap: 32px;
$tablet:	568px;
$desktop:	896px + (2 * $gap);
//$widescreen:	1152px + (2 * $gap);
//$fullhd:	1344px + (2 * $gap);

Try portrait and landscape on mobile and tablet on https://pigeoncoin.org/test/team/

[JohnMica]

in addition to the proposed variable $navbar-breakpoint i suggest adding the following code:

$navbar-breakpoint: $tablet !default

+from($navbar-breakpoint)
  .navbar-burger
    display: none
  .navbar,
  .navbar-menu,
  .navbar-start,
  .navbar-end
    align-items: stretch
    display: flex
  .navbar > .container
    display: flex
    justify-content: space-between
    padding-left: 0.75rem
    padding-right: 0.75rem

just before the +desktop inside the sass/components/navigation.sass

this should work on anything that is supposed to have a visible menu on landscape phones and up

[odarriba]

Any chance of getting this without modifying the breakpoints? @JohnMica 's solution looks pretty good 🚀

[cpmech]

Here you go my solution. In my <style> section (using Vue), I add:

$navbar-breakpoint: 414px;

@mixin my-touch {
  @media screen and (max-width: $navbar-breakpoint - 1px) {
    @content;
  }
}

@mixin my-desktop {
  @media screen and (min-width: $navbar-breakpoint) {
    @content;
  }
}

@import '~bulma/bulma';

Then I patch navbar.sass using the following diff file:

--- ../node_modules/bulma/sass/components/navbar.sass	1985-10-26 01:15:00.000000000 -0700
+++ /home/me/temp/navbar.sass	2018-05-28 13:09:44.461850380 -0700
@@ -75 +75 @@
-      +desktop
+      +my-desktop
@@ -220 +220 @@
-+touch
++my-touch
@@ -261 +261 @@
-+desktop
++my-desktop

The changes look like this:

By the way, I'm using bulma 0.7.1.

Hope it helps ;-)

[webstractions]

@JohnMica solution solved part of the problems. Items that were not addressed included the 'untouch-ing' of the box-shadow for the menu, navbar-start and end, etc.

I devised a solution that allows you to 'untouch' things like the navbar, or anything else that you deem necessary.

src/assets/sass/main.sass

// Import Bulma
@import "@/assets/bulma/bulma.sass"

// Customization
$navbar-breakpoint: $tablet  // set this for your needs, defaults to $tablet

@import './utilities/_all.sass'
@import './components/_all.sass'

src/assets/sass/utilities/initial-variables.sass

$navbar-breakpoint: $tablet !default

src/assets/sass/utilities/mixins.sass

// multi-purpose mixin to 'untouchify' things like the navbar
=untouch
  @media screen and (min-width: $navbar-breakpoint) and (max-width: $desktop - 1px)
    @content

src/assets/sass/components/navbar.sass

+untouch
  .navbar
    & > .container
      align-items: stretch
      display: flex
      min-height: $navbar-height
      width: 100%
      padding-left: 0.75rem
      padding-right: 0.75rem
  .navbar-burger
    display: none
  .navbar,
  .navbar-menu,
  .navbar-item
    flex-grow: 1
    flex-shrink: 0
    align-items: stretch
    display: flex
  .navbar-item
    display: inline-flex
  .navbar-start
    justify-content: flex-start
    margin-right: auto
  .navbar-end 
    justify-content: flex-end
    margin-left: auto
  .navbar-menu
    box-shadow: unset

[xpuu]

@jgthms Is there any chance of getting this fixed in official release? Could donation help perhaps? Thanks...

[TheNeikos]

It's been a year 😸 Anything still blocking this?

[labogdan]

In navbar.sass, I changed two things and it seems to work how I want it. It keeps the menu open with no hamburger until phone sized screen.

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.

[mlncn]

Another person looking for an easier supported way of changing the nav-bar breakpoint!

[mlncn]

Fix seeking reviews and ultimately merging in: #2109

[ghost]

In navbar.sass, I changed two things and it seems to work how I want it. It keeps the menu open with no hamburger until phone sized screen.

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.

Can I get the updated version of this? On line 235 - 239 for Bulma 0.7.5 is now:

+until($navbar-breakpoint)
  .navbar > .container
    display: block
  .navbar-brand,
  .navbar-tabs

[charles-allen]

I think the fix misses an edge-case when the navbar is styled (it loses the style between $navbar-breakpoint and $desktop).

@jgthms - Can we reopen this (more specific) issue: #2334?

Mobile:

Tablet:

Desktop: