How to set the background color of the navigation bar?

Flow
1

Hello!

Do you know how to set the color of the navigation bar to another color?

@CssImport("./CSS/Hem.css")
public class Hem extends AppLayout {

	private static final long serialVersionUID = 1L;
	
	@Autowired
	private Top top;
	
	@PostConstruct
	public void init() {

		// Set the top
		boolean touchOptimized = true;
        addToNavbar(touchOptimized, top.getBarImage(), top.getDrawerToggle());
        addToDrawer(top.getTabs());

18098848.png

2

It can be done using CSS theming:

  1. Create a CSS file in the project’s frontend folder, e.g. frontend/styles/vaadin-app-layout-styles.css
  2. Add the desired declaration using the navbarTop as the id selector
#navbarTop {
	background: yellow;
}
  1. Add @CssImport annotation to the top most parent layout
@CssImport(value = "./styles/vaadin-app-layout-styles.css", themeFor = "vaadin-app-layout")
3

Tarek Oraby:
It can be done using CSS theming:

  1. Create a CSS file in the project’s frontend folder, e.g. frontend/styles/vaadin-app-layout-styles.css
  2. Add the desired declaration using the navbarTop as the id selector
#navbarTop {
	background: yellow;
}
  1. Add @CssImport annotation to the top most parent layout
@CssImport(value = "./styles/vaadin-app-layout-styles.css", themeFor = "vaadin-app-layout")

Does not work if I not use themeFor = "vaadin-app-layout", but if I do, then I can’t control the size of the bar image.
Do I need to use themeFor?

4

The bar image should be still controllable with the themefor in place, using methods such as setHeight() and setWidth().

Example,

@CssImport(value = "./styles/vaadin-app-layout-styles.css", themeFor = "vaadin-app-layout")
public class AppLayoutWithNavbarMenu extends AppLayout {
    public AppLayoutWithNavbarMenu() {
        Image img = new Image("https://i.imgur.com/GPpnszs.png", "Vaadin Logo");
        Tabs tabs = new Tabs(new Tab("Home"), new Tab("About"));
        img.setWidth("250px");
        img.getStyle().set("height", "25px");
        addToNavbar(true, img, tabs);  
    }
}
5

Tarek Oraby:
The bar image should be still controllable with the themefor in place, using methods such as setHeight() and setWidth().

Example,

@CssImport(value = "./styles/vaadin-app-layout-styles.css", themeFor = "vaadin-app-layout")
public class AppLayoutWithNavbarMenu extends AppLayout {
    public AppLayoutWithNavbarMenu() {
        Image img = new Image("https://i.imgur.com/GPpnszs.png", "Vaadin Logo");
        Tabs tabs = new Tabs(new Tab("Home"), new Tab("About"));
        img.setWidth("250px");
        img.getStyle().set("height", "25px");
        addToNavbar(true, img, tabs);  
    }
}

Thanks. But then I will have some issues with mobile view.
I’m using CSS for both mobile and desktop.