how to remove login icon on submenu and menu bar move down whenever it clicked (mobile version only)

Store Design
, , , , , , , ,
1

Hi!

I am using dawn theme on my website. I wanted to remove the login icon on my mobile version while keeping the ‘log in’ text. Another problem is that whenever I clicked ‘SHOP’, all the header section appear to move down slightly. would someone be able to help me with the code? Thank you so much!

this is what it looks like when i don’t click ‘SHOP’

IMG_0134.PNG
IMG_0134.PNG1320×2868 129 KB

whenever it clicked, it looks like this. all the header section move down slightly and this is the icon that I wanted to remove.

IMG_0133.jpg
IMG_0133.jpg1320×2868 107 KB

2

Hey @nana98

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

If I managed to solve your problem then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

3

Hey @nana98 ,

Thanks for reaching out!

You’re absolutely right, on the Dawn theme, the mobile menu drawer can sometimes feel a bit off compared to the rest of your beautifully designed site. The reason you’re seeing that slight shift when clicking “SHOP” is because the menu drawer is missing some key CSS styling, which can make things look a little clunky.

We’d recommend rewriting parts of the menu drawer’s code to better match the aesthetic and smoothness of your site’s other sections. This will help ensure the header doesn’t jump and the overall mobile experience feels more polished.

Also, if you want to hide just the login icon on mobile while keeping the “Log in” text, you can try this quick CSS tweak:

.menu-drawer__account {
  display: none !important;
}

Let us know if you’d like help implementing the changes—we’d be happy to jump in and get this cleaned up for you!

Best,
Shubham | Untechnickle

4

Hello there @nana98 As for removing the icon link, you can check out the straightforward process in this YouTube video here https://m.youtube.com/watch?v=rDIG6V3S2VE

5

Hi @Moeed ,

I have tried to put in the code, however it does not work.

6

Hi @TheUntechnickle ,

the code works, however it entirely removed the icon & the text too.

7

My bad! If you want to just hide the logo, use this CSS

.menu-drawer__utility-links svg {
display: none !important;
}

Thanks,
SV

8

Hi @TheUntechnickle

it works! Thank you so much for the help!