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

[Apeya]

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!

[websensepro]

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

[Apeya]

Hello,
Website name is apeya.co

Thanks

[websensepro]

@Apeya 

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file and paste the below code before </body>

 <script>
const hamburger = document.querySelector('.menu-drawer-container');
const logo = document.querySelector('.header__heading-logo-wrapper');


hamburger.addEventListener('click', function() {
 
  if (hamburger.hasAttribute('open')) {
   
    logo.style.opacity = '1';
  } else {
   
    logo.style.opacity = '0';
  }
});
</script>

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!

[Apeya]

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

[Made4uo-Ribe]

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 </body> tag and paste the code below before the tag. 

<style>
@media only screen and (max-width: 749px){
header.header:has(.menu-drawer-container[open]).header__heading {
    display: none;
}
}
</style>

• And Save. 
• Result:
• 

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

[Apeya]

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!

[Made4uo-Ribe]

Please, try this again. 

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

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! 

[Apeya]

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.

[Apeya]

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 

[Made4uo-Ribe]

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!

[Apeya]

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!!

[Made4uo-Ribe · Accepted solution]

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!

[Apeya]

Yess, the icons stopped moving with this code.

Highly appreciate your work, Mr Made4uo-Ribe xD