i am using Horizon theme
Hi, would you please give your website url so that I can give you the solution?
Hi @user361 ,
Yes, we can add the CSS to move it to the left. But I need the website link to provide you the same style that is used on the website. I also want to check the tag div assigned to the class.
Can you please provide the URL because when I search it, it doesn’t appear on Google.
@user361 We need a website link. If you would like, you can provide me the collaboration code so that I can make the changes for you.
@user361 If you are interested in this let me know.
To achieve your layout — logo on the left, menu in the center, and icons on the right — you’ll need to modify the header layout using CSS flex and possibly edit the HTML structure depending on your theme.
Here’s a general CSS-based approach you can try:
1. Wrap the header elements in a flex container.
Ensure the logo, navigation menu, and icons are in their own containers within a flex parent.
2. Use this CSS:
.header__wrapper {
display: flex;
justify-content: space-between;
align-items: center;
}
.header__logo {
flex: 1;
text-align: left;
}
.header__menu {
flex: 1;
text-align: center;
}
.header__icons {
flex: 1;
text-align: right;
}
3. Remove excessive padding from .menu-list__link if it breaks centering.
Too much padding can cause the menu to shift.
You can adjust based on your theme’s class names. If you tell me your theme name (e.g. Dawn), I can give more exact code.
Nice start tweaking the CSS looks like you’re almost there
To align the logo to the left, menu to the center, and icons to the right, you’ll likely need to adjust the header layout using Flexbox in your theme’s header section. The base.css change helps spacing, but structure will matter here too.
If you’re up for it, feel free to drop your store URL seeing how your theme is structured like if you’re on Dawn or another can help a lot.
Also, if this dives into a bit of Liquid or layout tweaking, I speak theme code fluently
Happy to point you in the right direction!
