Bulma: Highlighting the active page in a navbar

[retorquere]

This is about Bulma.

This is a question/I need help.

I have a navbar, and I want to highlight the active menu entry. I can set extra classes on the active menu (I currently add is-selected but I could add any other); I'd want to achieve the visual effects of is-active but without the menu remaining dropped-down. Is this possible?

This is about the Bulma CSS framework
I'm using Bulma version 0.6.2
My browser is: Chrome
I am (fairly) sure this issue is not a duplicate

[eppfel]

Are you talking about the dropdown menu or the burger-menu? Because with the latter using is-active on navbar-item is no problem.

[retorquere]

About the dropdown menu, sorry about omitting that info.

[prodigeris]

Also interested in this.

[rodrigoaguilera]

This might be a good chance to make the a.navbar-item.is-active style more noticeable on the default bulma skin (no coloring of the navbar) since it goes from #0a0a0a (active) to #4a4a4a (not active).
Also the active background is transparent. Shouldn't it be some kind of gray?

I hope I explained myself clearly. I can provide some HTML samples if necessary.

[Lucretiel]

Can I request that .navbar-item.is-active gets an example in the documentation?

[suud]

@Lucretiel what kind of example are you missing?

The last paragraph of the navbar-item section in the documentation already mentions:

You can add the following modifier classes:

• is-expanded to turn it into a full-width element
• __is-tab to add a bottom border on hover and show the bottom border using is-active__

Adding is-tab to my a.navbar-item's fixed the visibility problem mentioned by @rodrigoaguilera, for me. The item having is-active is noticeably highlighted, now.

[alexanderadam]

since it goes from #0a0a0a (active) to #4a4a4a (not active)

Indeed. It seems that the current rule is simply to darken the color by 5%.
Accessibility wise this clearly fails. Especially since this is only text and not an area (this makes it even worse).

Since the 5%-logic obviously fails, you need to add another hint for activation (i.e. migrating to a tab look or adding a background colour as mentioned before) or you can visually 'inactivate' the inactive colour even more. For instance something like this:

With SASS/SCSS

$navbar-item-color: lighten($text, 30%);

CSS

.navbar-menu .navbar-item, .navbar-link {
  color: #9C9C9C;
}