change menubar style

Dominik Grimmeisen

Hi,
i try to change the style of my menubar.

I added a picture to display it easy.
I try to make a Menubar leftsided and a Label rightsided. The HorizontalLayout in back i give the stylename "v-menubar", so it looks like the menubar.
But know i have to delete the broder from typical MenuBar.

I try it like this:
I add a StyleName "v-menubar-inner" and set in css "border: 0" in my <my-theme>.scss But it wont work. It doesn´t change the menubar.
I try to set a background-color to test the css style but it also wont work.

I don´t know, how i can edit the style.
Thanks for your help.

BR
Dominik

Unbenannt.PNG (3.6 kB)

Joacim Päivärinne

Hey Dom,

This should do it.

@Override
protected void init(VaadinRequest request) {
  final HorizontalLayout layout = new HorizontalLayout();
  layout.setMargin(true);
  setContent(layout);

  layout.addStyleName("v-menubar");
  layout.setWidth("100%");

  MenuBar mb = new MenuBar();
  mb.addItem("", FontAwesome.POWER_OFF, null);
  mb.addStyleName(ValoTheme.MENUBAR_BORDERLESS);

  layout.addComponents(mb, new Label("Testing"));
}

Dominik Grimmeisen

Thanks i will try it =)

Dominik Grimmeisen

Ok, today i got the time and try it.

It works fine. Thanks!

Important Notice - Forums is archived

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

Important Notice - Forums is archived

Vaadin lets you build secure, UX-first PWAs entirely in Java.Free ebook & tutorial.

change menubar style

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.