Navbar in Vaadin 24

Hello, I am playing with the new styling features in Vaadin 24 but for some reason I can’t edit the background color of the nav bar. This is my CSS:

#navbarTop {
    background: red;
}

Which component do you mean as navbar? Menu bar or app nav? The later is currently not an official component and probably not fully supported by the new styling I would guess

The navbar from AppLayout

vaadin-app-layout::part(navbar) {
background-color: red;
}

Thank you, that worked! But I am confused because when I do inspect components it has the ID navbarTop, so it should have worked too

image.png

:thinking: not sure… my shadow dom voodoo isn’t strong enough for that… but @useful-whale can probably shed some light on it the next days once he sees this ping

Hmm, strange, if I change it to red it works, but if I change it to white it is still has this grey border

image.png

Oh, using background instead of background-color solved it

https://github.com/vaadin/web-components/blob/07792ca769bf9abeb11c1c51eb61223a06cf1c0a/packages/app-layout/theme/lumo/vaadin-app-layout-styles.js you can find here the default styles, background has probably higher precedence

Do you know how to get rid of the border completely? I have a Tabs component inside the navbar. I want the yellow box at the very corner of the page
image.png

Ok, I solved it with min-height: 0px;

CSS is hard :laughing:

Now I just need to get rid of these sides on the tabs component

image.png

Solved it with

vaadin-tabs::part(tabs) {
    margin: 0px;
}

Perhaps you didn’t notice the Styling tab that lists all CSS selectors? https://vaadin.com/docs/latest/components/app-layout/styling

The reason ID selectors don’t work is the Shadow DOM, which is still there. The V24 styling method does not mean you can style anything as if it were in light DOM – it means that you can style everything without injecting CSS into the shadow DOM, but you still need to use specific selectors that can access elements in the shadow DOM.