Solved

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

NeginA
Shopify Partner
51 0 4

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
5127 1224 1498

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!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


View solution in original post

Made4uo-Ribe
Shopify Partner
5127 1224 1498

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!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


View solution in original post

Made4uo-Ribe
Shopify Partner
5127 1224 1498

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!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


View solution in original post

Made4uo-Ribe
Shopify Partner
5127 1224 1498

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!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


View solution in original post

Replies 17 (17)

Made4uo-Ribe
Shopify Partner
5127 1224 1498

Hi @NeginA 

Can I take a look? Would you mind to share your Store URL website? with password if its unpublish. Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


NeginA
Shopify Partner
51 0 4

I prefer not to share password 😞 

Made4uo-Ribe
Shopify Partner
5127 1224 1498

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

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


NeginA
Shopify Partner
51 0 4
NeginA
Shopify Partner
51 0 4

@Made4uo-Ribe Waiting to hear back?

Made4uo-Ribe
Shopify Partner
5127 1224 1498

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!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


NeginA
Shopify Partner
51 0 4

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
5127 1224 1498

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!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


NeginA
Shopify Partner
51 0 4

Is there a way to make the navigation menu centered? 

 

Made4uo-Ribe
Shopify Partner
5127 1224 1498

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!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


Made4uo-Ribe
Shopify Partner
5127 1224 1498

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

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


NeginA
Shopify Partner
51 0 4

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
5127 1224 1498

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!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


NeginA
Shopify Partner
51 0 4

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
5127 1224 1498

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!

 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


NeginA
Shopify Partner
51 0 4

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

Can you look again please? 

NeginA
Shopify Partner
51 0 4

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