How can I fade out the website logo when opening the hamburger menu on mobile?

Store Design
1

I really want to smoothly hide my logo when the hamburger menu is opened. Got inspired by apple.com mobile website version drawer menu and would love to make something similar!!

Theme - Dawn

Huge thanks in advance!

1 Like
2

Hi @Apeya , kindly provide your store URL please and if it is password protected, please share the password as well. Thanks

3

Hello,
Website name is apeya.co

Thanks

4

@Apeya

  1. Go to Online Store ā†’ Theme ā†’ Edit code.
  2. Open your theme.liquid file and paste the below code before

websensepro_0-1735656377108.png
websensepro_0-1735656377108.png1044Ɨ521 163 KB

If my reply is helpful, kindly click like and mark it as an accepted solution.

If you are happy with my help, you can help me buy a COFFEE

Thanks!

5

Thank you for provided solution, but unfortunately it didnā€™t work(

The logo is still visible after opening the hamburger menu //Maybe you have any other ideas how to solve it?

thanks

6

Hi @Apeya

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 ā€œtheme. Liquidā€ file. Find the tag and paste the code below before the tag.

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

7

Hi,

Just tried your variant and it doesnā€™t work either. Logo stays in the way it was beforeā€¦

Still thanks, hopefully someone finds a way out!

8

Please, try this again.

And Save.

Same Instruction.

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

9

It does work, but only for a home page header. Can we make it active for
the whole website?
Also I noticed that when I press on hamburger menu each header icon shakes
a little, can we fix it as well? *I attached a file to showcase an issue.

10

Sorry, couldnā€™t upload the video, but here is a link to my google drive where you can check the foresaid issue:

Thanks

https://drive.google.com/file/d/1f3Z7GGO7uCyv59z62SYV17ZO0QcGc-ta/view?usp=sharing

11

change the code with this one,

@media only screen and (max-width: 749px){
header.header:has(.menu-drawer-container[open]) a.header__heading-link {
    display: none !important;
}
}

and save.

For your icons, you need a developer to check that one.

Please donā€™t forget to Like and Mark Solution to the post that helped you. Thanks!

12

Everything works!

About icons - I believe this code acts as a trigger for ā€˜shakeā€™ issue, because I didnā€™t have such problem before pasting the code(

Maybe we can try to fade out header icons, not just covering them with burger menu drawer?

If you canā€™t help me with this one, I will mark the previous code as a correct solution//

Thank you!!

13

The code only call the logo not the icons.

we can change into visibility like this not the display none.

@media only screen and (max-width: 749px){
header.header:has(.menu-drawer-container[open]) a.header__heading-link {
    visibility: hidden !important;
}
}

And Save.

What the code is saying is that when the menu drawer in the header is open, the logo will be hidden.

Please donā€™t forget to Like and Mark Solution to the post that helped you. Thanks!

14

Yess, the icons stopped moving with this code.

Highly appreciate your work, Mr Made4uo-Ribe xD