Change header colour when menu drawer is open

Store Design
, , , ,
1

How can I change the mobile header colour when the menu drawer is open.

This is my current code:

document.getElementById('Details-menu-drawer-container').addEventListener('click', function() {
    document.getElementById('Details-menu-drawer-container').classList.add('clicked');

      if (document.getElementById('Details-menu-drawer-container').classList.contains('clicked')) {
      console.log(document.getElementById('Details-menu-drawer-container').classList);

        document.getElementsById('shopify-section-header').style.background = 'red';
    }
});

This only needs to happen on the homepage.

Store URL: https://aoapparel.co.uk/

Password: thaosk

Thanks!

2

@LewisSutton - which color do you want to change?

suyash1_0-1667831838801.png
suyash1_0-1667831838801.png1366×768 124 KB

3

Hi @suyash1 ,

I need to change the transparency of the header to #141414

4

@LewisSutton - actually right now color is #141414 only, do you mean transparency of the header like in screenshot?

suyash1_0-1667833420129.png
suyash1_0-1667833420129.png1366×768 170 KB

5

@suyash1 Yes, the transparency of the header in the screenshot. Thank you!

6

Hi @LewisSutton ,

Try to add this code at the bottom of Theme > Edit code > assets > base.css file

.shopify-section.section-header.menu-open sticky-header {
	background-color: rgb(20, 20, 20, 0.4) !important;
}

Try it and let me know

7

@suyash1 Hi, thank you for looking into this. But, I have managed to complete it myself! Thank you

1 Like
8

@LewisSutton - congratulations, do let us know if you need anything.

9

Hi @suyash1 , I tried to make my header to white color ONLY when the menu is open , and now my header is transparent in both (menu open&close) , is there any code that can help me out? thank you

10

@Bst1 - can you please share your website link?

1 Like
11

Yes!

bstcloth.com

scroll down a bit and than the header background will be transparent but when you open the menu the header is still transparent and I want it to be white when my costumers clicks on the menu

12

Hi!

I succeeded somehow to do it, but maybe you could help me in another something? I asked another question about menu animation, pls check this link https://community.shopify.com/topic/2358863