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

[NeginA]

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. 

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 

[Made4uo-Ribe · Accepted solution]

Hi @NeginA 

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

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!

[Made4uo-Ribe · Accepted solution]

I think you already change? 

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!

[Made4uo-Ribe · 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:

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

[Made4uo-Ribe]

Hi @NeginA 

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

[NeginA]

I prefer not to share password 😞 

[Made4uo-Ribe]

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

[NeginA]

@Made4uo-Ribe 

9041jj9041

www.undigabledigs.com

[NeginA]

@Made4uo-Ribe Waiting to hear back?

[Made4uo-Ribe · Accepted solution]

Hi @NeginA 

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

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!

[NeginA]

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 · Accepted solution]

I think you already change? 

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!

[NeginA]

Is there a way to make the navigation menu centered? 

[Made4uo-Ribe · 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:

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

[Made4uo-Ribe]

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

[NeginA]

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 · 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!

[NeginA]

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]

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!

[NeginA]

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

Can you look again please? 

[NeginA]

Hi! 

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

Can you help me with this?

[NeginA]

Hi! 

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

Can you help me with this?

[NeginA]

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