Search code examples
cssvaadinvaadin-flowvaadin24

Vaadin 24 override styles for NavBar

The Vaadin 24 version has the following styles for navbar:

[part="navbar"] {
  min-height: var(--lumo-size-xl);
  border-bottom: 1px solid var(--lumo-contrast-10pct);
}

I want to remove the following line:

min-height: var(--lumo-size-xl);

For this purpose I created the vaadin-app-layout.css file and placed to mytheme\components folder:

[part~="navbar"] {
  border-bottom: 1px solid var(--lumo-contrast-10pct);
}

But it has no effect. What am I doing wrong and how to correctly override this style?

UPDATED

I added mytheme\components\vaadin-app-layout.css

[part="navbar"] {
  border-bottom: 1px solid var(--lumo-contrast-10pct);
  min-height: unset;
}

but it doesn't work

Then I added to styles.css:

vaadin-app-layout::part(navbar) {
  border-bottom: 1px solid var(--lumo-contrast-10pct);
  min-height: unset;
}

and it works. Why it doesn't work for vaadin-app-layout.css?

Solution

  • I think, since Vaadin 24, you have to put CSS for customising Vaadin components into the directory component-styles inside of your theme directory (no longer just components).