Hi! I have the Local Theme and I have been trying to center the Logo and the menu but haven’t had luck. I have tried with all the solutions already offered in this forum but none seemed to work with my theme.
My goal:
| [logo] |
| [menu] [cart] |
What it currently looks like:
| [logo] [cart]|
| [menu] |
I also posted a Screen shot of what it currently looks like.
Thanks!
Hi @Local_q . Welcome to Shopify Community!
It wouldn’t be possible to style this with just CSS as the logo and buttons are located within one div and the menu is rendered with a sibling div. You can’t change the DOM order with CSS.
This change would require editing your header.liquid file, most likely, or another corresponding .liquid file.
You can add this code to Custom CSS in of header to make your header like this
.site-nav.style--classic {
justify-content: center;
}
If you still want to make header look like your request then we will need to access theme and edit code to do that.
Hi, @Local_q
Can you please share the store URL so I can better support you?
This code (can go to “Theme settings”=> “Custom CSS”)
@media (min-width:1024px) {
.header-actions--buttons {
position: absolute;
right: 0;
max-width: 320px;
}
div#logo {
padding: 0 320px;
justify-content: center;
}
.header__top {
display: flex;
justify-content: center;
}
.site-nav.style--classic {
justify-content: center;
}
}
Will do this:
Moving Account/Cart buttons to the menu line can not be done nicely with CSS only; also, as seen in the screenshot – they would not fit, there is much more space for them in the logo line.
