A user seeks help aligning header elements in their Shopify store theme. The issues include:
Desktop view:
Mobile view:
A developer provides CSS code solutions targeting the base.css file. Initial code addresses mobile icon positioning and close button placement using header-drawer, .icon-close, and .header__icons classes with specific margin and positioning adjustments.
After the user confirms mobile changes worked but requests hamburger menu alignment, the developer provides updated CSS code that:
header-drawer height to 40px for proper alignmentThe solution successfully resolves all reported issues. The user confirms satisfaction with the final result.
Hello!
I would be eternally grateful if you could assist with correcting the pain points in my header.
Move the menu bar down slightly. (image 1)
Move the search, account and bag up to align with the menu bar (image 1)
In mobile view, the shopping bag and search need to be moved over to the right. (image 2)
The “x” in the menu should be on the right.
right5785*
Dawn version
Open base.css file from your theme code editor and paste these at the very bottom of everything
header-drawer{
align-self: end;
}
@media(max-width:749px){
.header__icons{
margin-right: -20px;
}
.icon-close{
bottom: -20px;
right: 10px;
z-index: 10;
}
}
Hello @Shadab_dev ,
I followed the instructions however nothing changed.
Hi @ErhatRO It did take effect. The login, search are more to the right and x in on the right as well
Hi @Shadab_dev Apologies! I was checking the desktop view. Mobile view has changed. Thank you!
Is there a separate code to move the hamburger menu down to align with the icons search and shopping icon in mobile view?
header-drawer{
align-self: end;
height: 40px;
}
.icon-close{
left: 30%;
}
@media(max-width:749px){
.header__icons{
margin-right: -20px;
}
.icon-close{
left: 5%;
}
}
Paste this code the menu icon will align. and x will be on the right. I have changed the x on mobile to be on left rather than right since it interferes with the links below. I was actally doing it for mobile thus you were not seeing the effect. the x is on the right now on desktop
Please paste the new code and see instructions
This is great thank you!!
