Jump to content

background overlay on menu pop out

Recommended Posts

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.

Screen Shot 2021-05-05 at 11.06.22 am.png

Link to comment
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.

Screen Shot 2021-05-08 at 9.15.33 pm.png

Link to comment
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.

Screen Shot 2021-05-08 at 9.15.33 pm.png

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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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.

Link to comment
  • 2 years later...
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 ?

 

 

Screenshot 2023-12-06 at 14.23.09.png

What is your site url? We can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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!!!!!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.