$navbar-breakpoint breaks nav style within certain breakpoints

[mirukushake]

This is about Bulma.

It is a bug.

Overview of the problem

This is about the Bulma CSS framework

I'm using Bulma version [0.7.2] My browser is: Chrome 71.0.3578.98

I am sure this issue is not a duplicate

Description

I am using Bulma via Buefy/NUXT.

When using $navbar-breakpoint: $tablet in custom scss, the navbar loses style (is-info, is-link, etc.) and turns white between 769 and 1087px.

Steps to Reproduce

@import "~bulma/sass/utilities/_all";

$navbar-breakpoint: $tablet;

@import "~bulma/bulma";
@import "~buefy/src/scss/buefy";

Expected behavior

The navbar should stay the same color.

Actual behavior

And on link hover:

Changing the $navbar-background-color variable does not change the behavior either.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[GabDug]

Issue still affecting recent Bulma versions. Could a new issue be created?

[truebits]

I can confirm the issue.

[charles-allen]

How do we get this re-opened?

I'm seeing the same with Bulma 0.7.5 (via Buefy 0.8.18). I tried depending on Bulma directly to raise the version to 0.8.2 (I think I can, right?!?). Both show the bug. My navbar loses is-primary. It also appears to gain a little vertical padding:

Mobile:

Tablet:

Desktop:

[elmatou]

I got it too, while setting $navbar-breakpoint: to a lower value to keep menu visible even on mobile, I noticed that it do not display very well because the menu background kick at 1023px and below @media screen and (max-width: 1023px) even if $navbar-breakpoint is set to a lower value.

this lines are responsible for the breakpoint handling with background : https://github.com/jgthms/bulma/blob/bd1b032be84ba7c6334199c3fa18e789fd04eead/sass/components/navbar.sass#L236 & https://github.com/jgthms/bulma/blob/bd1b032be84ba7c6334199c3fa18e789fd04eead/sass/components/navbar.sass#L248

but strangely I keep getting @media screen and (max-width:1023px) { after sass compilation (though vue-cli / buefy)

same with bulma version 0.7.5 & 0.9.1

[elmatou]

it appears there is two set of rules in my compiled file : around line 5032 :

@media screen and (max-width: 499px) {
.navbar > .container {
    display: block;
}
...
.navbar-menu {
    background-color: #34495e;
    box-shadow: 0 8px 16px rgba(10, 10, 10, 0.1);
    padding: 0.5rem 0;
}
...

Which hold the correct behaviour ( $navbar-breakpoint:500px in this case)

and around line 9868

@media screen and (max-width: 1023px) {
.navbar {
    color: #ecf0f1;
}
.navbar .navbar-menu {
    background-color: #ecf0f1;
    border-radius: 0 0 0.4em 0.4em;
}
...

Which hold the faulty rules

Clearly the sccss was loaded tow times with $navbar-breakpoint reset between them. Still investigeting, but there is some thing with the loading of bulma/buefy and bootswatch theme.

[elmatou]

Confirmed as a bootswatch theme issue.

jenil/bulmaswatch#86

[charles-allen]

I'm seeing the same with Bulma 0.7.5 (via Buefy 0.8.18). I tried depending on Bulma directly to raise the version to 0.8.2 (I think I can, right?!?). Both show the bug. My navbar loses is-primary. It also appears to gain a little vertical padding: ...

Apologies! I followed this up today; re-wrote the navbar with vanilla Bulma classes (not Buefy components) and the issue vanishes. I will follow this up with Buefy! Edit: Reported to Buefy Edit2: Not solved; see next post.

Correct behaviour @ tablet

Correct behaviour @ desktop (for comparison)

[charles-allen]

Update: Seems I didn't fix it; I accidentally bypassed it. My working code was missing: <div class="navbar-menu" ...></div>. I will try to create a minimal repro & re-post the issue to the appropriate repo.

[wainscape]

Hi. Any update or suggested workaround for this issue? I am experiencing it now, and have yet to figure out the cause.