Login button position on mobile view menu drawer - Shopify Dawn

Store Design

Topic summary

Issue: Users of Shopify’s Dawn theme want to reposition the login/account button in the mobile menu drawer from its default bottom placement to the top.

Attempted Solutions:

  • Made4uo-Ribe provided CSS code targeting base.css to hide utility links and adjust account icon visibility using media queries for mobile screens (max-width: 749px). Initial code didn’t resolve the issue.

  • developerSP suggested removing CSS lines 441-445 from base.css that hide elements on mobile, then adding custom CSS to control menu utility links and account icon visibility.

Current Status: The discussion remains ongoing/unresolved. The original poster tried the first CSS solution without success. A second user (manan123) reported the same issue, indicating this is a common Dawn theme customization request. Multiple CSS approaches have been proposed but effectiveness hasn’t been confirmed. Screenshots were shared to illustrate the problem and desired outcome.

Summarized with AI on November 12. AI used: claude-sonnet-4-5-20250929.
1

Hi there,

I’m using Dawn theme. I’m facing a problem with the Login button on mobile menu drawer. It appear at the bottom of the drawer. I want to place it at the top of the drawer, above the menu. Can anybody help me to dp that, please.

Mobile view:

20230806_022645.jpg
20230806_022645.jpg1080×1680 52.8 KB

Thanks in advance.

@deb007

1 Like
2

Hi @deb007 ,

Would you mind to share your store URL website? with password if its protected. Thanks!

1 Like
3

Hello @deb007

Kindly provide the website URL along with the corresponding password.

Thank you :blush:

1 Like
4

Hi @Made4uo-Ribe ,

I’ve sent you the required details by msg. Pls. check it.

Thanks

@deb007

1 Like
5

I’ve sent you the required details by msg. Pls. check it.

Thanks,

@deb007

1 Like
6

Thank you for the information. Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. 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:
  4. And Save.
@media only screen and (max-width: 749px) {
a.header__icon.header__icon--account.link.focus-inset.small-hide {
    visibility: visible;
}
.menu-drawer__utility-links {
    display: none;
}
1 Like
7

Hi @Made4uo-Ribe ,

Thanks for your reply. I’ve entered the code you’ve given, but unfortunately it didn’t work out for me.

Mobile drawer screenshot.jpg
Mobile drawer screenshot.jpg1080×1688 48.7 KB

Thanks,

@deb007

8

Try this one again. I add some.

@media only screen and (max-width: 749px) {
a.header__icon.header__icon--account.link.focus-inset.small-hide {
    visibility: visible !important;
}

Let me know if still not working. Maybe Its better you add it on the theme.liquid files. Thanks!

9

Hello @deb007

Asset > base.css and Remove this css line no :- 441 to 445

@media screen and (max-width: 749px) {
.small-hide {
display: none !important;
}
}

please add this css Asset > base.css and paste this at the bottom of the file:-

.menu-drawer__utility-links {
display: none;
}
10

hey i’m also having same issue i am using dawn theme i want to shift that sign in option from footer in mobile menu drawer at the top , see screenshot for better understanding

manan123_0-1707416491806.png
manan123_0-1707416491806.png224×399 24.5 KB

want to shift this highlighted option to the upward

My store url –https://mansaroverfurnishings.com/

Please help me in this code