Bulma: New Navbar component is not inheriting Hero's color

[rafaelpimpa]

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.