Re: Center Logo & Position Navigation bar on top of header (above logo) In Charge Shopify Theme

Solved

Center Logo & Position Navigation bar on top of header (above logo) In Charge Shopify Theme

NeginA
Shopify Partner
55 0 5

I would like to center current Logo & position the Navigation bar at the very top (above logo) and search bar centered under logo In Charge Shopify Theme. 

 

Screenshot 2024-01-09 at 10.28.27 AM.png

End result: Need to Have logo stand alone in the center of header with navigation menu above and search bar under the logo in the center

This is in Charge Shopify Theme 

Accepted Solutions (4)
Made4uo-Ribe
Shopify Partner
8751 2092 2568

This is an accepted solution.

Hi @NeginA 

Sorry, I just read and forget to reply back. Do you mean like this? 

Made4uoRibe_0-1705509992120.png

Let see if my code will work, 

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 only screen and (min-width: 768px){
header.header.dynamic-page-width.header--has-menu {
    display: grid;
    grid-template-areas:
        'navigation'
        'icons'
        'heading';
    grid-template-rows: auto auto auto;
    grid-template-columns: 1fr;
    gap: 20px;
    padding-bottom: 20px;
}
}
@media (min-width: 768px), print
.list-menu--inline {
    justify-content: center;
}
</style>

 

And save. 

 

 

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.

View solution in original post

Made4uo-Ribe
Shopify Partner
8751 2092 2568

This is an accepted solution.

I think you already change? 

Made4uoRibe_0-1705594191746.png

Just change the grid-templates area. 

 

If my code help,  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.

View solution in original post

Made4uo-Ribe
Shopify Partner
8751 2092 2568

This is an accepted solution.

Yes, Ieve already centered thsi one maybe the code didnt listen. Add this code inside the style, before the </style> in the theme.liquid where  you place the code. 

 

ul.list-menu.list-menu--inline {
    justify-content: center !important;
}

 

And save.

Result:

Made4uoRibe_0-1705599378553.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.

View solution in original post

Made4uo-Ribe
Shopify Partner
8751 2092 2568

This is an accepted solution.

The previous code, I give is nothing to do with the color. Cause it only for the alignment. Check this one. Im not sure what is cause of sudden changes but if you add some app or makes some change it would be possibly the cause. 

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 "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

 

.header__submenu.list-menu.list-menu--disclosure a:hover {
    color: black !important;
}
.header__submenu.list-menu.list-menu--disclosure a {
    color: white !important;
}

 

And Save. 

 

 

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.

View solution in original post

Replies 19 (19)

Made4uo-Ribe
Shopify Partner
8751 2092 2568

Hi @NeginA 

Can I take a look? Would you mind to share your Store URL website? with password if its unpublish. 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.
NeginA
Shopify Partner
55 0 5

I prefer not to share password 😞 

Made4uo-Ribe
Shopify Partner
8751 2092 2568

Oh, It the password to enter your unpublish store. Not the admin. 

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.
NeginA
Shopify Partner
55 0 5
NeginA
Shopify Partner
55 0 5

@Made4uo-Ribe Waiting to hear back?

Made4uo-Ribe
Shopify Partner
8751 2092 2568

This is an accepted solution.

Hi @NeginA 

Sorry, I just read and forget to reply back. Do you mean like this? 

Made4uoRibe_0-1705509992120.png

Let see if my code will work, 

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 only screen and (min-width: 768px){
header.header.dynamic-page-width.header--has-menu {
    display: grid;
    grid-template-areas:
        'navigation'
        'icons'
        'heading';
    grid-template-rows: auto auto auto;
    grid-template-columns: 1fr;
    gap: 20px;
    padding-bottom: 20px;
}
}
@media (min-width: 768px), print
.list-menu--inline {
    justify-content: center;
}
</style>

 

And save. 

 

 

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.
NeginA
Shopify Partner
55 0 5

Thank you so much @Made4uo-Ribe 

All of it is exactly what I was looking for but wondering if I can get the logo as a stand alone at the very top center and everything else underneath? Sorry for the confusion 

Made4uo-Ribe
Shopify Partner
8751 2092 2568

This is an accepted solution.

I think you already change? 

Made4uoRibe_0-1705594191746.png

Just change the grid-templates area. 

 

If my code help,  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.
NeginA
Shopify Partner
55 0 5

Is there a way to make the navigation menu centered? 

 

Made4uo-Ribe
Shopify Partner
8751 2092 2568

This is an accepted solution.

Yes, Ieve already centered thsi one maybe the code didnt listen. Add this code inside the style, before the </style> in the theme.liquid where  you place the code. 

 

ul.list-menu.list-menu--inline {
    justify-content: center !important;
}

 

And save.

Result:

Made4uoRibe_0-1705599378553.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.
Made4uo-Ribe
Shopify Partner
8751 2092 2568

Thank you for the coffee tip, so nice to recieve coffee while its raining. 😊

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.
NeginA
Shopify Partner
55 0 5

oh I'm so happy to hear! Also, I noticed when I added the code...on the homepage only - the navigation menu drop down categories are white out...you can't see the text? It's not in the customization/editor part because it works fine on other pages... can you help with this? 

Made4uo-Ribe
Shopify Partner
8751 2092 2568

This is an accepted solution.

The previous code, I give is nothing to do with the color. Cause it only for the alignment. Check this one. Im not sure what is cause of sudden changes but if you add some app or makes some change it would be possibly the cause. 

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 "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

 

.header__submenu.list-menu.list-menu--disclosure a:hover {
    color: black !important;
}
.header__submenu.list-menu.list-menu--disclosure a {
    color: white !important;
}

 

And Save. 

 

 

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.
NeginA
Shopify Partner
55 0 5

Thank you so much! Last, can you provide a code to get the hamburger menu left aligned only on mobile, thank you! tip coming your way 🙂

Made4uo-Ribe
Shopify Partner
8751 2092 2568

Oh, Sorry I didnt ask about the mobile alignment. Please, add this code to the previous code I give paste it before the </style> tag.

 

@media only screen and (max-width: 768px){
header.header.dynamic-page-width.header--has-menu {
display: grid;
    grid-template-areas:
        'heading'
        'navigation'
        'icons';
    grid-template-rows: auto auto auto;
    grid-template-columns: 1fr;
}
}

 

And save. 

 

 

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.
NeginA
Shopify Partner
55 0 5

It brought it under the logo but to the left... I am pasting in theme.liquid 

Can you look again please? 

NeginA
Shopify Partner
55 0 5

Hi! 

in reference to this...I didn't catch this before but when I hover down the submenu...the headers disappear 

Screenshot 2024-03-07 at 1.51.18 PM.png

 

Can you help me with this?

NeginA
Shopify Partner
55 0 5

Hi! 

in reference to this...I didn't catch this before but when I hover down the submenu...the headers disappear 

 

Screenshot 2024-03-07 at 1.51.18 PM.png
Can you help me with this?

NeginA
Shopify Partner
55 0 5

@dmwwebartisan Can you help with this? You've helped me in the past before 🙂