Help with menu display

[Cure123]

Hi,
Can you please remind me how I can get the menu to stretch a bit so it isn’t clustered to one side on a large screen?
Thank you

[ruenel]

Hello Jane,

Thanks for writing in!

To separate the containers from the left and to the right of your header, please edit your header, click the bar and in the settings, make sure that the horizontal flex layout is set to “Space Between”.

To be familiar more about how you can do the flex layout for the header, please check this knowledge base article: https://theme.co/apex/forum/t/using-flexbox/24851

Kindly check out your header now.

[Cure123]

Thanks RueNel. Instead of just shifting the menu is there a way to get the menu items to stretch to fill up space? i.e. to increase the space between each menu item, much in the way you just increased the space between containers. I changed the max on the content box but that didn’t work and looking I can’t see a setting ?might mean that characteristic is fixed unless I increase font size?
Kind regards

[thai]

Hi There,

To achieve that, please change the SELF FLEX > Preset option to Fill Space:

After that please navigate to UberMenu Control Panel > Position & Layout > Top Level Menu Items > Horizontal Item Alignment > select Flex(Justify):

Hope it helps

[Cure123]

Thanks Thai,
As per your advise I changed the menu bar alignment set to “full width”, the Horizontal item alignment to Flex (justify) under customise Uber
And on my header bar that the menu is in: I’ve set it to self flex: fill space with flex basis auto as in your screen shot. And I changed the flex in “navigation inline” to fill space, with flex basis auto too - just in case. I feel like I’m changing a lot of settings and it continues to look the same! I tried purging my cache but still the same. And when I make the changes in the header editor, nothing changes in the appearance of my menu. I must still be doing something wrong??

[ruenel]

Hello Jane,

I have edited your ubermenu and added this custom css:

.ubermenu-responsive-default.ubermenu {
    width: 80%;
}

You can make it 100% if you want to.