A user with the Local Theme is trying to achieve a specific header layout: centered logo on the first line, with centered menu and right-aligned cart on the second line. Currently, the logo and cart appear together on the first line, with the menu alone on the second.
Key responses:
Betterave-Nina explains this cannot be achieved with CSS alone, as the logo/cart and menu are in separate div containers. Editing the header.liquid file would be required to change the DOM structure.
Dan-From-Ryviu offers CSS to center the menu:
.site-nav.style--classic {
justify-content: center;
}
But notes that achieving the exact requested layout requires theme code editing.
Status: Partial solutions offered via CSS, but full layout requires liquid file modifications. User requested to share store URL for further assistance.
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.
