Centre Nav Menu with Logo in Header

Solved

Centre Nav Menu with Logo in Header

DigikyleAI
Tourist
7 0 2

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.

DigikyleAI_0-1728055579778.png

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?

Accepted Solution (1)
Tech_Coding
Shopify Partner
384 106 90

This is an accepted solution.

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 </body> on theme.liquid
<style>
@media screen and (min-width: 990px) {
   .header--middle-left {
       grid-template-columns: auto !important;
    }
}
</style>

Tech_Coding_0-1728056317399.png

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

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Shopify UI Developer
Your Coffee Tips adds a little sweetness to my day.

View solution in original post

Replies 10 (10)

Made4uo-Ribe
Shopify Partner
8769 2096 2571

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!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
DigikyleAI
Tourist
7 0 2
Tech_Coding
Shopify Partner
384 106 90

This is an accepted solution.

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 </body> on theme.liquid
<style>
@media screen and (min-width: 990px) {
   .header--middle-left {
       grid-template-columns: auto !important;
    }
}
</style>

Tech_Coding_0-1728056317399.png

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

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Shopify UI Developer
Your Coffee Tips adds a little sweetness to my day.
DigikyleAI
Tourist
7 0 2

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?

Tech_Coding
Shopify Partner
384 106 90

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 </body> on theme.liquid
<style>
@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;
       }
   }
</style>

Tech_Coding_0-1728059623637.png

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

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Shopify UI Developer
Your Coffee Tips adds a little sweetness to my day.
DigikyleAI
Tourist
7 0 2

Found the </body>

But it's done this instead

DigikyleAI_0-1728060430661.png

 

Made4uo-Ribe
Shopify Partner
8769 2096 2571

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 </body> tag and paste the code below before the tag. 

 

<style>
@media screen and (min-width: 990px) {
.header__icons.header__icons--localization {
    grid-column: 2/2;
    grid-row: 1;
}
.desktop-localization-wrapper {
    margin-left: unset;
}

.header-wrapper {
    display: grid;
    grid-template-columns: 2fr auto;
}

.header__heading, .header__heading-link {
        justify-self: end;
    }
header.header.header--middle-left.header--mobile-center.page-width {
    margin: unset;
}
.header--middle-left {
    grid-template-columns: 1fr auto !important;
}
}
@media screen and (max-width: 989px) {
.header-wrapper {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
}

header.header.header--middle-left {
    margin: unset;
}
}
</style>

 

And save. 

Result:

Made4uoRibe_1-1728058375720.png

 

 

 

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

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
DigikyleAI
Tourist
7 0 2

It's done this?

DigikyleAI_1-1728060666574.png

 

DigikyleAI
Tourist
7 0 2

DigikyleAI_0-1728056123162.png

This is the desired result I am trying to achieve.

DigikyleAI
Tourist
7 0 2

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