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

[nana98]

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'

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

[Moeed]

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 </body> tag

<style>
.menu-drawer__utility-links {
    display: none !important;
}
</style>

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

Best Regards,
Moeed

[nana98]

Hi @Moeed ,

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

[TheUntechnickle]

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

[nana98]

Hi @TheUntechnickle ,

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

[TheUntechnickle · Accepted solution]

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

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

Thanks,
SV

[nana98]

Hi @TheUntechnickle 

it works! Thank you so much for the help!

[Bundler-Manuel]

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 

[DipakPatel1]

Hello @nana98 

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 </body> tag

<style>
.menu-drawer__utility-links {
    display: none !important;
}
</style>