Problem/Motivation
After #3402592: Reset theme css. , still some Umami styles leak into the navigation like the hover state in a submenu.

Steps to reproduce
1. Standard profile installation will give you Olivero and Claro themes
2. demo_umami profile installation will give you Umami theme
3. Don't forget to enable Top Bar /admin/config/user-interface/navigation/settings and test it
4. Go through the whole side navigation from logotype till "collapse sidebar" button
5. Go through the all levels of menu
6. Test hover, focus styles.
Proposed resolution
Fix the styles.
User interface changes
There shouldn't be visual changes on the default navigation.
| Comment | File | Size | Author |
|---|---|---|---|
| #2 | Снимок экрана 2024-04-04 в 13.11.13.png | 826.21 KB | kostyashupenko |
| umami-active.png | 48.23 KB | ckrina |
Issue fork navigation-3437696
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
Comments
Comment #2
kostyashupenkoAfter investigation i found that not only Umami overrides styles of Navigation module, but also Claro and even Olivero sometimes. It's related to some global selectors which have bigger specificity than our global:
Here is screenshot illustrating that styles from Claro theme are overriding :focus on logotype in navigation bar.
And now i think that having such selectors in user themes is a pretty popular thing:
And now we can't guarantee themes will never override navigation module styles. So we have to increase specificity of our selectors. To be sure we are safe in terms of styles no matter which theme is used.
@finnsky suggested to try this https://developer.mozilla.org/en-US/docs/Web/CSS/@layer and now i'm gonna try to implement it
Comment #3
kostyashupenkoUPD:
Seems we can't go with @layer at-rules.
@layer is useful only when need to override user agent styles seems like. But any CSS property written by us (author styles) has bigger specificity than @layer's. Always. Which means if we will wrap some code in @layer - user themes will still override navigation module styles.
Will try to increase specificity of our selectors without @layer
Comment #4
ahsannazir commentedYes there are also other places where styles are getting overriden by umami. I agree with #2 and #3, we need to increase the specificity for selectors.
e.g:
.toolbar-menu__link:hovertoa.toolbar-menu__link:hoverComment #6
kostyashupenkoTask is finished. Now Olivero, Claro and Umami are not overriding hover and focus styles of the navigation module
Comment #7
kostyashupenkoComment #8
kostyashupenkoComment #9
kostyashupenkoComment #10
kostyashupenkoComment #11
ckrinaComment #13
ckrinaMerged, thank you!