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

saboo1991
Tourist
3 0 2

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

saboo1991_0-1691598551479.png

 

Please help 🙂

Replies 14 (14)

Made4uo-Ribe
Shopify Partner
5370 1296 1587

Hi @saboo1991 

Would you mind to share your Store URL website? with password if its protected. 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
5370 1296 1587

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! 🙌"

 

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


saboo1991
Tourist
3 0 2

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
Shopify Partner
5370 1296 1587

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!

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


saboo1991
Tourist
3 0 2

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
Shopify Partner
5370 1296 1587

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. 

Ribe_Dagandara_0-1691611134321.png

 

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


Delasoul
Tourist
24 0 3

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).Header.JPG

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

Made4uo-Ribe
Shopify Partner
5370 1296 1587

Hi @Delasoul 

I can check, would you mind to share your store URL? 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


Delasoul
Tourist
24 0 3

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

PW:deanee

Made4uo-Ribe
Shopify Partner
5370 1296 1587

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!

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


Delasoul
Tourist
24 0 3

It's on the symmetry theme...  

Delasoul
Tourist
24 0 3

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
Shopify Partner
5370 1296 1587

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. 

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


Delasoul
Tourist
24 0 3

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 🙏