New Navbar component is not inheriting Hero's color

[rafaberaldo]

Overview of the problem

This is about the Bulma CSS framework I'm using Bulma version [0.4.3] My browser is: Chrome/FF I am sure this issue is not a duplicate

Description

New Navbar within Hero is not inheriting it's color, is-transparent doesn't fix. Is that intentional?

Steps to Reproduce

See: https://codepen.io/anon/pen/jwpKXG

Expected behavior

Navbar to have the same color as the Hero, just like Nav.

Actual behavior

Navbar is always white.

[czamp]

It would appear that using the .is-transparent helper class with .navbar applies a transparent background-color to its direct children, the .navbar-item and .navbar-link, and their pseudo classes.

It does not effect the background color of the .navbar itself, nor does it apply a transparent background color to any .navbar-item classes nested within a .navbar-dropdown.

If you want your navbar to match the color of your hero, you can include the following in any custom Sass you load after Bulma:

.navbar
  &.is-transparent
    background-color: transparent

If you want transparent dropdowns as well, the following should work:

.navbar
  &.is-transparent
    background-color: transparent
    .navbar-dropdown
      background-color: transparent
      box-shadow: none
      a.navbar-item
        &:hover
          background-color: transparent
        &.is-active
          background-color: transparent

[geirmarius]

@czamp There's also the problem on where the text color should inherit and where it can't because of the white dropdown menu, which makes it a bit tricky.

I'd very much love to see support for navbars inside heros.

[gopumon]

If you are using scss version you can customize the navbar color scheme like this.

@import './path/to/bulma/sass/utilities/_all';

$navbar-background: $turquoise !default;
$navbar-item: $white !default;

and importing bulma main style.

@import "./path/to/bulma/bulma";

[rogerschlachter]

Feels weird that the navbar background-color is set to white, but it doesn't have a set color. In my case, it's using the color from .hero.is-primary which in my case was white.

[miklb]

I'd very much love to see support for navbars inside heros.

👍

[heliosbayma]

Actually,

We can achieve it by writing a sass (or scss) file and just rewriting Bulma's own code. This way we'll still be able to use the 'is-transparent' class (an approach that is not far from what gopumon posted). And yes, there's a bug as the 'is-transparent' is being overwritten, but I still didn't have time to find it (I am using version 0.4.4).

`@import './path/to/bulma/sass/utilities/_all'

.navbar &.is-transparent background-color: transparent

@import './path/to/bulma/bulma'`

[99z]

The docs for the hero element do give an example with a nav by way of using: <header class="nav">. This works well but makes code less DRY - can't reuse the same navbar component for pages with a hero acting as a splash screen.

[99z]

Similar workaround to what @heliosbayma posted: If you define $navbar-background-color as rgba(0,0,0,0) before importing Bulma and have the nav element beneath the hero-head div it will be transparent.

[Folyd]

Any progress? Did it get fixed?

Anyway, I don't think background setting for navbar is a good idea, and the background should decouple from those commonly used components.

[ayrock-dev]

Looking forward to this fix, myself. I am working with Bulma and React. As a workaround, I have two nav components, one structured with the css class nav and one with navbar. I use the nav navbar inside the hero (such as on the homepage) and the navbar component elsewhere.

+1 for support of navbar inside hero with is-primary!

[ejnaren]

This is more than just the hero. Even the docs example shows a white background even though it is-transparent: http://bulma.io/documentation/components/navbar/#transparent-navbar

[Gravitana]

To make transparent navbar, you must add this code

.navbar { &.is-transparent { background-color: transparent; background-image: none; } }

[Lukortech]

Having a bit of trouble too #2136

[jenil]

@jgthms is this ever going to be fixed?

[MorganMarshall]

Hit this issue 10 minutes into using bulma.

[arvind0598]

I've had a similar issue an hour into using Bulma, from the following variables that I used with a navbar inside a hero header, only the hover background was affected and everything else was overridden by the hero CSS.

$navbar-background-color, $navbar-item-color, $navbar-item-hover-background-color, $navbar-item-hover-color

[jenil]

@jgthms are you willing to accept a PR for this issue? I'm happy to make one!

[Sharparam]

I've had success using this SCSS code to patch the missing styles in the hero navbar:

.hero {
  @each $name, $pair in $colors {
    $color: nth($pair, 1);
    $color-invert: nth($pair, 2);
    &.is-#{$name} {
      .navbar-dropdown {
        .navbar-item {
          color: $grey-dark;
        }
      }

      .navbar-start, .navbar-end {
        .navbar-link {
          &::after {
            border-color: rgba($color-invert, 0.7);
          }

          &:hover::after {
            border-color: $color-invert;
          }
        }
      }

      .navbar-item.has-dropdown {
        &:focus, &:hover, &.is-active {
          .navbar-link {
            background-color: darken($color, 5%);
            color: $color-invert;

            &::after {
              border-color: $color-invert;
            }
          }
        }
      }
    }
  }
}

Loaded after Bulma.

Might not cover all cases, I've tested with .hero.is-success.is-bold.

[hidekichi]

The version is bulma 0.9.3 In .navbar.is-dark, at line 5240, we have

.navbar.is-dark {
  background-color: #363636; 
  color: #fff
}

In line 10786, after the setting of

.hero .navbar {
  background: 0 0
}

is set on line 10786 after the setting of .hero .navbar { background: 0 0 }, I think the background-color is overwritten by background: 0 0; and is not working. I think the text color does work. In .navbar, on line 5092, before .navbar.is-dark

.navbar {
   background-color: #fff;
   /*other options*/
}

background-color is of course overwritten on line 10786, so it is not working. In css that is read from the beginning, the later ones overwrite the earlier ones, so naturally the later ones take precedence.

For example, after loading the bulma from CDN, you can set up a new css on your own site, and use

.navbar.is-Dark {
  background-color: #363636;
  color: #fff; /*here is optional*/
}

and override it further, and I think it will work correctly.

Translated with www.DeepL.com/Translator

[haumacher]

Is this issue (also) about drop-down menus within a hero is not inheriting the hero's background color?

https://codepen.io/haumacher/pen/dyeabZM