Why is my menu misaligned on mobile and tablets?

Store Design
1

www.reneleblanc.com

Login password is client1 to enter site

My developer is having a big problem aligning the menu items for mobile and tablets on my site. On the menu page, the header menus (SHOP, COLLECTIONS and THE BRAND) are at the right place. When you click on the footer menu, SIGN IN/REGISTER should be in the exact place as SHOP was on the previous page, but it always shows lower. This should be consistent. Any idea why? We checked the space above the logo, the height of the logo, and the space below, and they all seem to be the same for these pages.

My developer has spent 3 days now trying to figure out why…

Please see attached. Any help would be greatly appreciated.

R

SIGN IN REGISTER should match SHOP
SIGN IN REGISTER should match SHOP1771×1445 252 KB

2

Hi @RENE_6

Thanks for posting.

When I was inspecting the page, I found that there is padding-bottom with 2px in the CSS. Maybe you can try to remove that CSS line and check again if they’re aligned.

Please check the screenshot below for more information.

Screenshot_7.png
Screenshot_7.png3729×1901 437 KB

Hope this may help!

Regards,

3

Thanks, I shared with my developer. Could it also be because the X on the menu page, and the magnifying glass, cart and = on the other page are different heights? Could the SIGN IN REGISTER menu be lower because the icons take up more room on top of that page?

4

Hi @RENE_6

That could be the case if you use icons with different sizes. And for best practices in terms of design, icons should have the same height and 20px of height could be a good option for me.

Additionally, you should also double check all of the padding and margin for icons and blocks to make sure they have the same value. This is where a design system would be very handy.