Vladislav38
(Vladislav Marinov)
December 5, 2019, 8:24am
1
Hi everyone,
Can somebody help me out with styling a nav bar in app layout?
I want to add a box-shadow to navigation bar.
What i tried, but didn’t work:
#navbarTop{
box-shadow: var(--lumo-box-shadow-xl);
}
vaadin-app-layout[slot="navbar"]
{
box-shadow: var(--lumo-box-shadow-xl);
}
On inspect from browser
Elements
<div part="navbar" id="navbarTop">
<slot name="navbar"></slot>
</div>
Best Regards
Joacim
(Joacim Päivärinne)
February 6, 2020, 9:12am
2
Hey Vladislav,
This should work if you’re using Flow:
my-app-layout.css
[part="navbar"]
{
box-shadow: var(--lumo-box-shadow-xl);
}
Then import that using @CssImport
:
@CssImport(value = "./styles/components/my-app-layout.css", themeFor = "vaadin-app-layout")
Magnus23
(Magnus Ahlden)
March 26, 2021, 9:16am
3
This doesn’t work at all for me in Vaadin 19. Don’t know if this require something special as the example is very brief.
Joacim
(Joacim Päivärinne)
March 26, 2021, 9:29am
4
For Vaadin 19 you can create vaadin-app-layout.css
and place it in <project>/frontend/themes/<theme>/components
.
Then in that CSS file you simply add:
[part="navbar"]
{
box-shadow: var(--lumo-box-shadow-xl);
}
Magnus23
(Magnus Ahlden)
March 26, 2021, 12:01pm
5
That doesn’t work either. For example If I try:
[part~=“navbar”]
{
background-color: rebeccapurple;
}
it’s still get the color Lumo decided…
also - it’s quite suprising that this major change has been done without updating the documentation.
We are also trying to get the variable vaadin-app-layout-navbar-offset-size set (to control the height).
This seems impossible since upgrading to v19. We’ve tried both
:host {
–_vaadin-app-layout-navbar-offset-size: 442px;
–vaadin-app-layout-navbar-offset-size: 542px;
}
html {
–_vaadin-app-layout-navbar-offset-size: 242px;
–vaadin-app-layout-navbar-offset-size: 292px;
}
in several places - but it seems like it won’t take…
Joacim
(Joacim Päivärinne)
March 26, 2021, 1:15pm
6
What do you have in your navbar
?
For example, I downloaded a V19 Java-only project from start.vaadin.com . There’s a file called MainView.java
which contains the following:
private Component createHeaderContent() {
HorizontalLayout layout = new HorizontalLayout();
layout.setId("header"); (1)
layout.getThemeList().set("dark", true); (2)
Styles related to the header
id is defined in main-view.css
.
The element’s theme is set to dark
which affects its background color.
AppLayout
will automatically update vaadin-app-layout-navbar-offset-size
based on the content in navbar
. So you can remove, or modify, the height definition in main-view.css
(3). Alternatively, you can set the height using the Java API with setHeight
.
#header {
height: var(--lumo-size-xl); (3)
box-shadow: var(--lumo-box-shadow-s);
}