1

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?

alexanoid
  • 24,051
  • 54
  • 210
  • 410
  • 1
    Like with any css, if you don't override it the previous value is still in effect. So you have to add e.g. min-height: unset – Knoobie Mar 10 '23 at 14:54
  • Thank you! Please see my updated question.. it still doesn't work for vaadin-app-layout.css but works for styles.css. What am I doing wrong with vaadin-app-layout.css? – alexanoid Mar 10 '23 at 15:03
  • 1
    Not sure, but your solution based on styles.css is better in the long run - so you are good to go. – Knoobie Mar 10 '23 at 20:37

1 Answers1

1

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).

Saba
  • 26
  • 2