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

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

1 Like

Hi @NeginA

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

I prefer not to share password :disappointed_face:

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

@Made4uo-Ribe

9041jj9041

www.undigabledigs.com

@Made4uo-Ribe Waiting to hear back?

@dmwwebartisan Can you help with this? You’ve helped me in the past before :slightly_smiling_face:

1 Like

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


And save.

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

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

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!

Is there a way to make the navigation menu centered?

Yes, Ieve already centered thsi one maybe the code didnt listen. Add this code inside the style, before the 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!

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

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?

1 Like

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!

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 :slightly_smiling_face:

1 Like

Oh, Sorry I didnt ask about the mobile alignment. Please, add this code to the previous code I give paste it before the 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!

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

Can you look again please?

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?

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?