background overlay on menu pop out

Site URL: https://love-carli.squarespace.com/

https://love-carli.squarespace.com/
Password: love

I have changed the mobile breakpoint on my website so the hamburger menu appears at 1024 px and then set the menu to only cover 55% of the screen, so it looks like the attached screenshot.

What I would love to know is how I can set an overlay so the background behind the menu darkens when the menu opens, then goes back to normal when it is closed. I would like the colour to be #1B383B at 25% opacity.  

Would appreciate any help!
Cheers.

Add to Design > Custom CSS

/* Popup out menu color */
.header--menu-open .header-menu {
    background-color: rgba(254,238,237,0.25) !important;
}

On 5/7/2021 at 12:56 AM, tuanphan said:

Add to Design > Custom CSS

/* Popup out menu color */
.header--menu-open .header-menu {
    background-color: rgba(254,238,237,0.25) !important;
}

 

Sorry @tuanphan, I wasn't clear enough. I want to overlay the page background behind the menu when it pops out. Something like the attached.

On 5/8/2021 at 6:16 PM, Carli said:

Sorry @tuanphan, I wasn't clear enough. I want to overlay the page background behind the menu when it pops out. Something like the attached.

Add to Design > Custom CSS

/* Overlay when burger active */
body.header--menu-open:after {
    background-color: rgba(0,0,0,0.5) !important;
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
}
body.header--menu-open header#header {
    z-index: 20;
}

19 hours ago, tuanphan said:

Add to Design > Custom CSS

/* Overlay when burger active */
body.header--menu-open:after {
    background-color: rgba(0,0,0,0.5) !important;
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
}
body.header--menu-open header#header {
    z-index: 20;
}

 

Thank you so much @tuanphan! Much appreciated.

hey! this code worked for me, except it had one problem where the background overlay doesn't show up on any other section than at the top of each page! so when I scroll down, and then try to open the menu, the background doesn't show. 

any ideas ?

On 12/6/2023 at 9:24 PM, daniellenoakes said:

hey! this code worked for me, except it had one problem where the background overlay doesn't show up on any other section than at the top of each page! so when I scroll down, and then try to open the menu, the background doesn't show. 

 

any ideas ?

 

 

What is your site url? We can check easier

5 hours ago, tuanphan said:

What is your site url? We can check easier

@tuanphan www.annajonesbridal.co.uk/home-new

On 12/8/2023 at 5:02 PM, daniellenoakes said:

@tuanphan www.annajonesbridal.co.uk/home-new

Use this new code

/* Overlay when burger active */
body.header--menu-open:after {
    background-color: rgba(0,0,0,0.5) !important;
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
}
body.header--menu-open header#header {
    z-index: 20;
}

On 12/10/2023 at 8:09 AM, tuanphan said:

Use this new code

/* Overlay when burger active */
body.header--menu-open:after {
    background-color: rgba(0,0,0,0.5) !important;
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
}
body.header--menu-open header#header {
    z-index: 20;
}

 

nothing short of a genius, once again @tuanphan I can't thank you enough!!!!!