How to centre all items in custom header in Pro

[mseledwards]

Hi,
I’ve tried searching in here for the answer and managed to somehow accidentally stumble upon at least half a solution but I’m trying to centre both the logo and the navigation items on the header as shown on this page: https://middleware.org.uk/stage/

I played with the “Flexbox” settings and somehow managed to get the logo image centre but for the navigation it doesn’t seem to be working in the same way.

I’ve tried selecting “centre” in as many places as I can but no luck as yet. Any suggestions please?

Many thanks

[ruenel]

Hey @mseledwards,

Thanks for writing in! You will have to enable the “Center All” Flexbox option in your Container 1 element.

Kindly let us know how it goes.

[mseledwards]

Brilliant, thank you! Weirdly, I thought I’d clicked and clicked that yesterday and it didn’t seem to do anything but this morning, hey presto! Thank you for your help

[tristup]

Hi @mseledwards,

Glad that we are able to help you.

Thanks

[mseledwards]

Thank you Followup question (although if you’d prefer me to put this in a new post to make it easier for others to find in the future, just say the word) … I’m noticing that on the home page, the navigation isn’t showing all the sub items but elsewhere on the site it’s working just fine.

For example, on this page: https://middleware.org.uk/stage/cold-buffets/ if you hover over “Catering”, all the items show up but on the home page (https://middleware.org.uk/stage/) it looks like it’s sort of hidden by the items on the page.

Any suggestions please? And thank you

[tristup]

Hi @mseledwards,

I have checked and found that the section in the Home Page has a z-index value set to auto. I would suggest you set it to 0 and check if that works for you or not.

Hope it helps.
Thanks

[mseledwards]

That did the trick! Thank you! So that leads to the question … what even is the Z index? And more importantly, is there a way to set the default to 0 for all pages because I’m noticing that other pages have the same issue but not all those pages are editable. For example, the blog index page: https://middleware.org.uk/stage/catering/

[Ismael]

The z-index property specifies the stack order of element in the document – higher value places the element in front of the others. Regarding the issue, try to add this code in the Custom Code > Global CSS field to make sure that the header stays above the other elements.

header.x-masthead {
    z-index: 100;
}

Let us know the result.

[mseledwards]

Sorry to be dense but I can’t see where to edit the global CSS. (And yes, did try searching in the forum first.)

Putting the code where I thought it should maybe go threw up an error:

[Ismael]

Please check the screenshot below.

For more info, this documentation should help: https://theme.co/docs/code-editors

[mseledwards]

@Ismael

header.x-masthead {
    z-index: 100;
}

Perfect! Thank you! I missed that button at the bottom there totally. Found it and added the code as suggested and it appears to have worked like a charm! Thank you!

[tristup]

Hi @mseledwards,

Glad that we are able to help you.

Thanks