Centre Nav Menu with Logo in Header

[DigikyleAI]

I’ve tried added the code thats been given to others requesting for aligning the nav menu to the centre, instead it seems to push it more to the right.

I’ve tried adding it into the theme.liquid, and at the bottom of the base.

And i’ve also tried adding it into Custom CSS.

Anyone able to assist?

[Made4uo-Ribe]

Hi @DigikyleAI

Do you mean center the logo and below the center logo is the nav? If it is would you mind sharing your store URL? Thanks!

[DigikyleAI]

Sure it’s, https://www.themetalfoundry.uk/

[DigikyleAI]

This is the desired result I am trying to achieve.

[Tech_Coding]

You can add code by following these steps

1. Go to Online Store → Theme → Edit code.

2. Open your theme.liquid file

3. Paste the below code before on theme.liquid

@media screen and (min-width: 990px) { .header--middle-left { grid-template-columns: auto !important; } }

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

[DigikyleAI]

That would have been the go to, but then the header dimensions change and I am trying to keep it at a certain size.

[DigikyleAI]

Thats worked, thank you.

But how can I also move the magnifying glass / icons in the top right to be in line with the menu and further from the edge?

[Made4uo-Ribe]

Thanks for the info, check this one.

From your Shopify admin dashboard, click on “Online Store” and then “Themes”

Find the theme that you want to edit and click on “Actions” and then “Edit code”.

In the “theme. Liquid” file. Find the tag and paste the code below before the tag.

And save.

Result:

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

[Tech_Coding]

You can add code by following these steps

1. Go to Online Store → Theme → Edit code.

2. Open your theme.liquid file

3. Paste the below code before on theme.liquid

@media screen and (min-width: 990px) { .header--middle-left { grid-template-columns: 2fr auto !important; margin-right: 0 !important; padding-right: 0 !important; } .header-wrapper{ display: flex; flex-direction: row-reverse; border-bottom: 1px solid #fff !important; } .header__menu-item { padding: 0 1.2rem 0 0 !important; } }

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

[DigikyleAI]

Found the

But it’s done this instead

[DigikyleAI]

It’s done this?