How do I move the navigation under my logo in the header

[saboo1991]

Hi, I am looking to move my navigation header below my brand logo (to be centered). Similar to the below:

Please help 🙂

[Made4uo-Ribe]

Hi @saboo1991 

Would you mind to share your Store URL website? with password if its protected. Thanks!

[Made4uo-Ribe]

Thank you for the information. Try this one.

1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
3. 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:
4. And Save.

@media only screen and (min-width: 1148px){
.header__main-nav {
    align-self: end;
}
h1.header__logo {
    position:absolute;
    bottom: 20px;
    right: -90%
}
.header__wrapper {
    padding-top: 100px;
}
}

This only in desktop. The mobile havehamburger menu. 

I hope it help. 

"🌟 Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better! 🙌"

[saboo1991]

Amazing this worked! But how do I get the Search, Account, and Cart icons to be on the same line as my logo AND have the header navigation to be spread equally so it's distributed across the screen (like the image above?)

[Made4uo-Ribe]

Oh, I fix that one it conflicts on the other code. Would you mind to back the header design before? without the code that I give? I think another solution. Thanks!

[saboo1991]

Also on my collection pages (everything except my homepage), the Brand logo is shifted Left, and the navigation header stays center. How do I get my Brand Logo to also stay center?

[Made4uo-Ribe]

Try this one again this time paste it on your theme.liquid file paste it before the </body>

<style>
@media only screen and (min-width: 1148px) {
.header__wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 0px;
    height: 200px;
}
h1.header__logo:nth-child(2) {
    grid-column: 2;
}
.header__main-nav:nth-child(1) {
    grid-row: 2;
    grid-column: 2;
}
.header__main-nav {
    margin-left: -30%;
}
}    
</style>

Like this in this image below. 

[Delasoul]

Dear @Made4uo-Ribe, I am having the exact same question and I would like to move my navigation one line underneith the logo and the shopping cart (see picture attached).

But unfortunatly it is not working in my online shop with this code you provided for @saboo1991. Could you help me, too? 🙏

[Made4uo-Ribe]

Hi @Delasoul 

I can check, would you mind to share your store URL? Thanks!

[Delasoul]

@Made4uo-Ribe thank you very much!
URL:https://casa-amao.com/

PW:deanee

[Made4uo-Ribe]

I manage to align donw the navigation, but there is some codes that stop to make it center. Please, share the default theme before you add some code to make the navigation center on logo and cart. Thanks!

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

[Delasoul]

It's on the symmetry theme...  

[Delasoul]

Hi @Made4uo-Ribe I am not sure if I understood your question yesterday correct... did you want to know the theme I am using? Or shall I center the logo? I can change the logo to the center (on top of my navigation), is that what you would like me to do first? 
Or is there any code that helps to just lover the navigation one step lower? Thanks a lot for your help!

[Made4uo-Ribe]

I like the default design before you change the navigation bar on the center. You add some code to make the navigation center. When I try to make the navigation down as you wanted. There are some conflicts with the code, so its stays on the left. 

[Delasoul]

Thanks, I understand. I already solved it and we decided to keep it as it is now. Thank you very much for visualizing what you tried before, only then I notived that the complete header will look to wide for our website. So we just leave it as it is now with the logo to the left, navigation in the center. But good to know that generally it would be possible 🙏