Center Logo with Menu Links on Both Sides - Refresh Theme

Center Logo with Menu Links on Both Sides - Refresh Theme

savageis
Tourist
7 0 2

Hey all,

 

I'm using Refresh theme version 12.0.0.

 

I currently have the logo in the center position and the menu is showing ONLY on the left. I'm looking for some CSS to have the menu split over both sides, if possible.

 

Thanks in advance.

Replies 8 (8)

Danishshopdev
Shopify Partner
163 17 20

Hello There,

Please share your store URL and password.
So that I will check and let you know the exact solution here.

banned

niraj_patel
Shopify Partner
2391 516 515

Hello @savageis 
can you share store URL?

Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
savageis
Tourist
7 0 2

https://savageisland.co.uk/

 

Store password: ahniyu

topnewyork
Astronaut
1176 154 198

Hi Savageis,

 

To split the menu over both sides with the logo centered in the Shopify Refresh theme (version 12.0.0):

  1. Go to "Online Store" > "Themes" in Shopify admin.
  2. Click "Customize" for the Refresh theme.
  3. Look for "Additional CSS" or similar.
  4. Add the following CSS code:

 

.site-header__logo {
    margin: 0 auto;
}

.site-nav__item {
    width: 50%;
    text-align: center;
}​


Save changes and preview.
If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Need a Shopify developer? Hire us at Top New York Web Design
Boost Your Store Sales with Volume/Tier Discount Try Big Bulk Discount
Create New Shopify Store For Just 1$/Month
savageis
Tourist
7 0 2

Tried this and it didn't work.

savageis
Tourist
7 0 2

https://savageisland.co.uk/

 

Store password: ahniyu

ThePrimeWeb
Shopify Partner
2139 616 520

Hey @savageis,

This CSS should work, but however I do not recommend it because ideally this should be a full header redesign. The CSS is a shortcut way to achieve it. 

nav.header__inline-menu {
    position: absolute;
}

nav.header__inline-menu li:nth-child(3){
    margin-right: 31vw;
}


@media only screen and (max-width: 1530px) {
    nav.header__inline-menu li:nth-child(3){
        margin-right:37vw;
    }
}


@media only screen and (max-width: 1260px) {
    nav.header__inline-menu li:nth-child(3){
        margin-right:40vw;
    }
}

@media only screen and (max-width: 1140px) {
    nav.header__inline-menu li:nth-child(3){
        margin-right:36vw;
    }
}


@media only screen and (max-width: 1060px) {
    nav.header__inline-menu li:nth-child(3){
        margin-right:33vw;
    }
}

@media only screen and (max-width: 1010px) {
    nav.header__inline-menu li:nth-child(3){
        margin-right:30vw;
    }
}
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
savageis
Tourist
7 0 2

Thank you. I have tried this but unfortunately the menu doesn't look good.

 

Would it be possible to move the menu to underneath the logo, from center?

 

If this would be easier to do with CSS, then we could work with it.