MenuBar

General
1

Hi everyone,

I’m trying to customize a menuBar.Actually I have some knowledge about CSS but I need your help for something that I think is easy.
I have a MenuBar with 4 Item : “Un, Deux, Trois, Quatre”. I want to set an icon for each one. The problem is that icon and text are displayed horizontally and I want the text to be below the icon. I tried with with several CSS rules but I’m not able to make it.
Thanks for your help.

2

for your UI that contain an icon add this code :

yourComponent.addStyleName(ValoTheme.BUTTON_ICON_ALIGN_TOP); of course you are using Valo Theme …

3

Hi,

tx! But are your sure this works for MenuItem in MenuBar. I tried it last evening and it didn’t.

4

The CSS for the Button component is not exactly the same as it is for the MenuBar, so that stylename won’t work.

If you’re using font icons, you can move them on top of the caption (or move the caption below the icon to be more precise) like this:

// Java
menubar.addStyleName("icons-on-top");

// SCSS
.v-menubar.icons-on-top {
  height: auto;

  span.v-icon {
    display: block;
  }
}

If you have items without icons next to items with icons, then you need to tweak the CSS slightly more.

5

thank you Jouni , that help me too…

6

Sorry for th late,

Thanks for your response, that’s helps me a lot.