Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
MenuBar and CSS in custom theme
Hi,
for a new web application that I am trying to create I need a MenuBar with another background-image.
I created my own theme and imported reindeer/styles.css into my styles.css. Now I would like to use a self-created image as background-image instead of vertical-sprites.png.
Whatever I try, the old image remains. Also changing other properties of .v-menubar doesn't seem to work.
The theme is set correctly in my application. Other changes in the theme are no problem. I'm not an CSS-expert, but I can help myself. Only this remains a mystery.
CSS
@import url(../reindeer/styles.css);
.v-menubar {
background-image: url(common/img/menubar.png);
}
.custom-main-menu {
background-image: url(common/img/menubar.png);
}
Java
MenuBar menuBar = new MenuBar();
menuBar.addStyleName("custom-main-menu");
menuBar.setAutoOpen(true);
menuBar.setWidth(100, Sizeable.UNITS_PIXELS);
menuBar.setHeight(100, Sizeable.UNITS_PIXELS);
Thank you very much,
Robby
Your style gets overriden by reindeer. You need to use more specific rules to overcome it :
Change :
.custom-main-menu {
Into:
.v-app .custom-main-menu {
To override the CSS in the Vaadin theme, I usually use "!important" in the style of my custom theme". In the case of the menu bar, I would do the following.
@import url(../reindeer/styles.css);
.v-menubar {
background-image: url(common/img/myOwnImage.png) !important;
}