What's your biggest current challenge? Have your say in Community Polls along the right column.

Re: Center Logo with Menu Links on Both Sides - Refresh Theme

Center Logo with Menu Links on Both Sides - Refresh Theme

savageis
New Member
6 0 0

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
2378 514 507

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
New Member
6 0 0

https://savageisland.co.uk/

 

Store password: ahniyu

topnewyork
Astronaut
774 124 141

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
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Try Big Bulk Discount To Boost Your Store Sales with Volume/Tier Discount
savageis
New Member
6 0 0

Tried this and it didn't work.

savageis
New Member
6 0 0

https://savageisland.co.uk/

 

Store password: ahniyu

ThePrimeWeb
Shopify Partner
2139 616 515

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
New Member
6 0 0

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.