MenuBar Styling

[aghosh1]

Hi All,

Is there a way to add components to the right most corner of the bar ? I basically want to add bunch of menu at the left corner and on the right corner leaving the center empty. Also any way to increase GAP between each menu ?

Regards
Arnab

[DarthMaul]

Hi,

The code below is make your items float right of the menu.

Code: Select all

.ui-menu .ui-menuitem {
    float: right;
}

what you mean by gap between menu's is it Gap between each menu items ?

[cagatay.civici]

Do you want to add custom content to the right side like;

http://www.primefaces.org/showcase/ui/m ... ubar.xhtml

[aghosh1]

Thanks for your reply. I don't want to add custom components but couple of more menu items and a button at the right most corner. Is that possible ?
By gap i mean space between consecutive menu items.

Is there a way to provide inline styling to each menu that i add to the bar ?

[mattcarp]

Hi Arnab. To add space between each menu item, in the component's corresponding css you can use the `host` selector and avoid the first child element (the menu title) with the following:

Code: Select all

:host .ui-menuitem li:not(:first-child) {
  margin-top: 20px;
}

Regards,

matt