Shopify themes, liquid, logos, and UX
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.
Hello There,
Please share your store URL and password.
So that I will check and let you know the exact solution here.
Hello @savageis
can you share store URL?
Hi Savageis,
To split the menu over both sides with the logo centered in the Shopify Refresh theme (version 12.0.0):
.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!
Tried this and it didn't work.
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;
}
}
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.
Learn what's possible with customizing Shopify Checkout beyond what's available out of...
By Shopify Feb 19, 20252m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025