CODEWITHSUNDEEP
javacssvaadinvaadin7
Stephane Grenier
Stephane Grenier

Reputation: 15925

Vaadin - How to customize MenuBar to look like links

I understand that this is done in CSS (well SCSS) 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 links. A good example is the Help link at the top of StackOverflow, just to the left of the search box at the top of the screen..

By default in Vaadin it looks like buttons, and when I click on them the button is highlighted and has this extra border color as shown below:

enter image description here

I want to remove all that and just make it look like a link that you click on. The MenuItem styling is great, but I just want to make it 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. Below is an example:

enter image description here

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. Again I'm just looking to remove the styling of the MenuBar and nothing else. 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:

enter image description here

For example I still have a blue highlighted button when I click. Also the popup menu is backgrounded to my custom color. I also have a separator line in black between the two elements. And although it's harder to see there is a fine white and grey line above and below the MenuBar to show some depth.

UPDATE: Added some css improvements but I'm still a ways away.

Upvotes: 0

Views: 2484

Answers (1)

Stephane Grenier
Stephane Grenier

Reputation: 15925

Even with the links in the comments just below the question I still struggled to find a solution. Eventually I ran into the Class ValoTheme and found I could do exactly what I wanted with one line of code. In fact it was better than what I was planning so kudos to the theme designers!

menuBar.setStyleName(ValoTheme.MENUBAR_BORDERLESS);

Upvotes: 2

Related Questions