java - Vaadin - How to customize MenuBar to look like links -


i understand done in css (well scss) i'm struggling how style menubar looks text. i'm ok menuitems are, want menubar links. example link @ top of stackoverflow, left of search box @ top of screen..

by default in vaadin looks buttons, , when click on them button highlighted , has border color shown below:

enter image description here

i want remove , make link click on. menuitem styling great, want make text. down carrot, styling menuitems, it's menubar i'd change. below example:

enter image description here

i've been messing around css bit , can't right style. appreciated. again i'm looking remove styling of menubar , nothing else. far have:

  .mymenubar   {     border: none;     background-image: none;     background-color: mybackgroundcolor;     box-shadow: none;   } 

the problem there still number of style elements i'm struggling with:

enter image description here

for example still have blue highlighted button when click. popup menu backgrounded custom color. have separator line in black between 2 elements. , although it's harder see there fine white , grey line above , below menubar show depth.

update: added css improvements i'm still ways away.

even links in comments below question still struggled find solution. ran class valotheme , found wanted 1 line of code. in fact better planning kudos theme designers!

menubar.setstylename(valotheme.menubar_borderless); 

Comments