Styling of front theme affects styling of navigation buttons

tried with logged in logged out but unable to reproduce please add more info on how to reproduce.

Did you follow the steps I added to reproduce it, specially the one where the CSS of the button element is altered?

I could reproduce again with Olivero following the instructions in the issue summary, so I'm removing the tag.
See the attachment here https://www.drupal.org/files/issues/2024-11-12/Screenshot%202024-11-12%2... →

There are many ways to break the navigation module. But on the other hand, the example you gave can break many other integrations

button {
  display: inline-block;
}

It violates at least two basic BEM rules:

1. Uses a tag as a selector
https://en.bem.info/methodology/css/#selectors

2. Adds external geometry to the block
https://en.bem.info/methodology/css/#external-geometry-and-positioning

The basic reset work was done here, but we are open to suggestions on how else we can preserve good components in the navigation. There are no web components in the core yet.
https://www.drupal.org/project/drupal/issues/3446357 🐛 Buttons are not accessible with display: contents applied Active

I think the main point that I'm trying to raise is that some basic styling from the front-theme is bleeding into the navigation bar and therefore affecting how it looks.

Not all themes (even heavily used Drupal ones) follow BEM rules.

Closing this one as a duplicate of 🐛 Front-end theme styles can bleed into Navigation Active . We've seen this recently on a handful of sites. There is some discussion in the issue about how to mitigate. Likely first step will be to mimic the way off-canvas dialog protects against style bleedthrough by shipping CSS with higher specificity in the navigation module.

Thanks all!