Contact us
Get started
Loading...
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.

Product icon
TUTORIAL

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

Calling javascript synchronously by Enver Haase, 3 weeks ago
Recent Posts
Vaadin Forum1. Vaadin Flow - Java

Help customizing a MenuBar to look like plain text

Stephan Grenier
7 years ago Jul 21, 2015 5:18am

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.

Johannes Laidler
7 years ago Jul 21, 2015 6:31am

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

 

+1
Stephan Grenier
7 years ago Jul 22, 2015 2:49am

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!!