Page 1 of 1

MenuBar Styling

Posted: 24 May 2016, 23:52
by 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 ?


Re: MenuBar Styling

Posted: 25 May 2016, 09:15
by DarthMaul

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 ?

Re: MenuBar Styling

Posted: 25 May 2016, 13:18
by cagatay.civici
Do you want to add custom content to the right side like; ... ubar.xhtml

Re: MenuBar Styling

Posted: 25 May 2016, 17:22
by 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 ?

Re: MenuBar Styling

Posted: 27 May 2016, 13:12
by 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;