Header Drawer menu

[sosober]

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

[jaimemaman]

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!

[tim]

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.

[sosober]

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?

[tim]

This:

.svg-wrapper {
  display: inline-flex;
  align-items: center;
  margin-right: 11rem;
  padding: 0;
}

Have you tried my code instead?