MenuBar and CSS in custom theme


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.


@import url(../reindeer/styles.css);

.v-menubar {
	background-image: url(common/img/menubar.png);
.custom-main-menu {
	background-image: url(common/img/menubar.png);


MenuBar menuBar = new MenuBar();
menuBar.setWidth(100, Sizeable.UNITS_PIXELS);
menuBar.setHeight(100, Sizeable.UNITS_PIXELS);

Thank you very much,


Your style gets overriden by reindeer. You need to use more specific rules to overcome it :
Change :

.custom-main-menu {


.v-app .custom-main-menu {


that did the job :slight_smile:

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;