Center Logo with Menu Links on Both Sides - Refresh Theme

[savageis]

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.

[Danishshopdev]

Hello There,

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

[niraj_patel]

Hello @savageis 
can you share store URL?

[savageis]

https://savageisland.co.uk/

Store password: ahniyu

[topnewyork]

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!

[savageis]

Tried this and it didn't work.

[savageis]

https://savageisland.co.uk/

Store password: ahniyu

[ThePrimeWeb]

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;
    }
}

[savageis]

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.