How can I align my register/login link and Instagram icon?

Technical Q&A

Topic summary

Issue: Misaligned register/login link and Instagram icon compared to other menu items in a Shopify theme.

Proposed fix (accepted): Add a mobile-specific CSS rule to remove extra left padding.

  • Admin path: Online Store → Themes → Actions → Edit code → Assets → open base.css/style.css/theme.css, then append the rule and save.
  • CSS detail: Inside @media only screen and (max-width: 989px), set padding-left: 0 for the selectors a.menu-drawer__account.link.focus-inset.h5.medium-hide.large-up-hide and a.list-social__link.link.

Outcome: Visual alignment achieved (confirmed with a result screenshot). The change targets mobile widths.

Rationale given: Spacing issues typically stem from margin or padding; here, removing left padding resolves the misalignment.

Status: Resolved. Images in the thread illustrate the before/after alignment.

Summarized with AI on January 15. AI used: gpt-5.
1

IMG_5876.png
IMG_5876.png1290Ă—2796 140 KB

how do i align the register/login link and instagram icon with the other menu items?

1 Like
2

Hi @ym1999

Check this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media only screen and (max-width: 989px){
a.menu-drawer__account.link.focus-inset.h5.medium-hide.large-up-hide, a.list-social__link.link {
    padding-left: 0px;
}
}
3

thank you very much! can i ask how you figured that out?

1 Like
4

Mostly the problem of the spaces are the margin or padding.