A user is customizing their Shopify header drawer menu and encountering CSS alignment issues. They need help with:
Main Issues:
Solutions Provided:
Two community members offered CSS fixes:
For arrow positioning: Adjust the .menu-drawer__menu-item>.svg-wrapper positioning from right: 3rem to right: 14rem, or use position: static with margin-left: 1rem to center arrows next to menu items
For legal menu spacing: Add margin-bottom: 5rem to .menu-drawer__footer-custom
For login centering: Apply margin: 5rem auto to .menu-drawer__footer-account
Follow-up Issue:
After implementing changes, header icons shifted to the left and cart bubble to the right. A responder suggested removing custom margin settings and using their provided code instead.
Code snippets and screenshots were shared to illustrate the solutions. The discussion remains ongoing as the user works through implementation.
I’ve dome some customization on my header drawer but I am blocked for two reasons.
I’d like the navigation menu to be centered as I’ve already set but I did not manage to move also the arrow to the center.
Finally, if you take a look I would like the legal menu to be higher and also the “login” should be in the middle between the legal menu and social media links
https://0byf0v-34.myshopify.com/
mohwhi
Hope you can help me.
Thank you
Hey SoSober
you need to update the absolute positioning of the svg arrow
right now it has a right position of 3rem, it should be something like 14rem
this is your css
.menu-drawer__menu-item>.svg-wrapper
add a new rule just for categories
#HeaderDrawer-categorie.menu-drawer__menu-item>.svg-wrapper
and give it a right of 14rem
and then for the legal menu, add some margin bottom
find the css
.menu-drawer__footer-custom
and give it some margin bottom e.g. 5rem
for example!
This is what I’d add to move your arrows to the center:
.menu-drawer summary.menu-drawer__menu-item {
padding: 1rem 2.4rem;
}
.menu-drawer .menu-drawer__menu-item>.svg-wrapper {
position: static;
transform: none;
margin-left: 1rem;
}
.menu-drawer .menu-drawer__close-button {
display: inline-flex;
justify-content: center;
}
And this will fix your login link:
.menu-drawer__footer-account {
margin: 5rem auto;
}
We set bigger top and bottom margins on this element and have it centred because of margin collapsing.
Thank you!
If you go check now the header icons are on the left side and the cart bubble is on the right.
how can I bring it as the Shopify default settings?
This:
.svg-wrapper {
display: inline-flex;
align-items: center;
margin-right: 11rem;
padding: 0;
}
Have you tried my code instead?
