Shopify themes, liquid, logos, and UX
I'm working on a template, and when I select the 'Mega Menu' option, the language selector, user account, and cart icon section move downwards, disrupting the layout. Has anyone experienced this issue or know how to fix it? I'd appreciate any guidance or suggestions for places where I can get help with this type of problem.
https://www.cozyvibeshome.com/
pass: cozycozy
Hey @CozyVibesHome,
Here’s an updated solution to adjust your header layout effectively. This approach resets the header grid and ensures proper alignment for the search, logo, and icons areas, while also addressing responsiveness and navigation alignment.
Add this CSS to your base.css or theme.css file.
/* Reset the header grid */
.header--top-center {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
}
/* Top row container */
.header--top-center::before {
content: '' !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
width: 100% !important;
}
/* Main header row */
.header {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
width: 100% !important;
padding: 20px 0 !important;
}
/* Left side - Search */
.header__search {
flex: 1 !important;
display: flex !important;
justify-content: flex-start !important;
}
/* Center - Logo */
.header__heading {
flex: 2 !important;
text-align: center !important;
margin: 0 !important;
}
/* Right side - Icons */
.header__icons {
flex: 1 !important;
display: flex !important;
justify-content: flex-end !important;
align-items: center !important;
gap: 20px !important;
}
/* Navigation row */
.header__inline-menu {
width: 100% !important;
margin-top: 10px !important;
}
/* Ensure mega menu doesn't break layout */
.mega-menu__content {
position: absolute !important;
width: 100% !important;
left: 0 !important;
top: 100% !important;
z-index: 20 !important;
}
/* Menu items alignment */
.list-menu.list-menu--inline {
justify-content: center !important;
}
/* Icons specific styling */
.header__icon--account,
.header__icon--cart {
display: flex !important;
align-items: center !important;
}
/* Responsive adjustments */
@media screen and (min-width: 990px) {
.header {
padding: 20px 50px !important;
}
.header__heading {
margin: 0 auto !important;
}
.header__icons {
min-width: 120px !important; /* Ensures consistent space for icons */
}
}
If this doesn’t work, it’s likely that the HTML structure needs adjustments. Let us know if you’d like us to look into it, and we can send a collaborator request to assist further.
Let me know if you have any questions or need more help!
Best regards,
Shubham | Untechnickle
Helping for free: hello@untechnickle.com
Don't forget to say thanks, it'll make my day - just send me an email!
Get Revize for Free | Let your shoppers edit orders post-purchase | #1 Order Editing + Upsell App
Hello! Thank for your response.
In this moment my header looks like this....I don't know why have to search fields.
Thank you so much for you help!
I would like something like this:
sorry wrong image:
I understand this very well. The thing is we need to change the HTML structure for this, and then align the CSS accordingly. Our team needs the collaborator access to get this done. It'd be great if you can send us the collaborator code so that we can send a request; only if you're comfortable.
Thanks,
Shubham | hello@untechnickle.com
Helping for free: hello@untechnickle.com
Don't forget to say thanks, it'll make my day - just send me an email!
Get Revize for Free | Let your shoppers edit orders post-purchase | #1 Order Editing + Upsell App
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025