Skip to content

Minimal nav-items in navigation with custom color/theme like "primary" not colored correctly #598

@AlTrAugsburg

Description

@AlTrAugsburg

Describe the bug
Minal Nav-Items are not colored correctly, when custom color/theme is chosen for it. If none is set, it works as intended. Also navigation with the class "max" seems not affected.

To Reproduce
Create a Navigation looking like this, with a custom color/theme, e.g. "primary":

<nav class="bottom primary">
  <a class="active">
    <i>home</i>
    <span>Broken</span>
  </a>
  <a href="link.html">
    <i>calculate</i>
    <span>Broken</span>
  </a>
</nav>

Expected behavior
It should look like, if no custom color/theme is chosen.

Possible Fix

With the following CSS-Code I was able to fix it for "primary" and "primary-container":

nav.primary:not(.max) > a:not(.button, .chip):is(:hover, :focus, .active){
  background-color: #00000000 !important;
}
nav.primary:not(.max) > a:not(.button, .chip):is(:hover, :focus, .active) > span{
  color: var(--on-primary);
}
nav.primary:is(.left, .right, .top, .bottom):not(.max) > a:not(.button, .chip):is(:hover, :focus, .active) > i{
  background-color: var(--primary-container);
}
nav.primary-container.fix:not(.max) > a:not(.button, .chip):is(:hover, :focus, .active){
  background-color: #00000000 !important;
}
nav.primary-container.fix:not(.max) > a:not(.button, .chip):is(:hover, :focus, .active) > span{
  color: var(--on-primary-container);
}
nav.primary-container:is(.left, .right, .top, .bottom):not(.max) > a:not(.button, .chip):is(:hover, :focus, .active) > i{
  background-color: var(--on-primary);
}

For fixing the "primary-container"-class, there was an extra setting needed, I expect it for all other "-container"-colors. I also tried it with a very red custom color-theme, and there I also needed the extra setting, that I could see the highlighting from hovering the button. But I don't know, how and if that should be included. If there is need I also can supply an example with that custom color-theme.

Codepen
https://codepen.io/AlTrAugsburg/pen/XJbrJPZ

Includes the fixes above.

Desktop:

  • OS: Linux
  • Browser Firefox and Brave (Chromium)
  • Version: Firefox 150.0.1 and Brave 1.89.145 with Chromium 147.0.7727.137

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions