Center Logo with Menu Links on Both Sides - Refresh Theme

savageis
New Member
5 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.

Danish | Full Stack Developer @ Esire.Inc
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Hire me for your next task! | Email | WhatsApp| Website

techlyser_web
Shopify Partner
1127 215 235

Hello @savageis 
can you share store URL?

Techlyser || 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
5 0 0

https://savageisland.co.uk/

 

Store password: ahniyu

topnewyork
Trailblazer
215 25 27

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 topnewyorkwebdesign.com
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel
savageis
New Member
5 0 0

Tried this and it didn't work.

savageis
New Member
5 0 0

https://savageisland.co.uk/

 

Store password: ahniyu

ThePrimeWeb
Shopify Partner
1187 309 228

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
savageis
New Member
5 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.