Help customizing a MenuBar to look like plain text

Flow
1

I understand that this is done in CSS but I’m struggling with how to style it so that the MenuBar looks like text. I’m ok with the MenuItems as they are, I just want the MenuBar itself to look like text. By default it looks like buttons, and when I click on them the button is highlighted and has this extra border color.

I want to remove all that and just make it look like text that you click on. The MenuItem styling is great, but I just want to make the MenuBar look like text. I like the down carrot, as well as the styling for the MenuItems, it’s just the MenuBar that I’d like to change.

I’ve been messing around with the css for a bit now and I just can’t get the right style. Any help would be greatly appreciated. So far I have:

  .myMenuBar
  {
    border: none;
    background-image: none;
    background-color: myBackgroundColor;
    box-shadow: none;
  }

The problem is that there are still a number of style elements I’m struggling with:

For example I still have a blue highlighted button when I click. Also the popup menu is backgrounded to my custom color (I tried to style the MenuItems to change the background but that didn’t work). I also have a separator line in black between my two MenuBar items. Lastly when I click on it the text is highlighted in a darker color from the background.

2

Hi Stephan,

to remove the focus around your menubar you can use the following code:

.v-menubar:after { display: none; } also i would recommend you to take a look at the valo sass documentation (
https://vaadin.com/api/valo/
 ).

If you want to style specific parts of your components you can check out the individual wiki component pages for more information about css-selectors.

example MenuBar:
.v-menubar { }
.v-menubar-submenu { }
.v-menubar-menuitem { }
.v-menubar-menuitem-caption { }
.v-menubar-menuitem-selected { }
.v-menubar-submenu-indicator { }

best regards

Johannes

3

I looked through that as well as
https://demo.vaadin.com/valo-theme/#!menubars
 but I was still struggling.

Eventually the solution I found was so simple, it was to use the ValoTheme constants, as in:

myMenuBar.setStyleName(ValoTheme.MENUBAR_BORDERLESS);

This worked exactly like I wanted! In fact it worked better than what I was planning, so kudos to the Valo theme designers!!