Make background dark when nav appears

say I have the following codepen https://codepen.io/-bloop-/pen/yLxdJNj if u click the coral coloed square, the navbar will appear how can I make the whole body barken up when the navBar appears??
7 Replies
glutonium
glutoniumā€¢2y ago
I've tried decreasing brightness() for thr body but it seem to only effect images the overall body doesn't get darken up
Jochem
Jochemā€¢2y ago
you're looking for something that's usually called a curtain. Use a div that covers the whole thing and has a background with an opacity set on it background-color: rgb(0 0 0 / 0.4); for example
glutonium
glutoniumā€¢2y ago
aaah i was literally about to do that šŸ˜‚šŸ˜‚ but tnx for assuring me tnx i was like : idk if it's gon work..but woth of try @jochemm and how can I make so when nav is opened user can't control the background like, when the nav is opened, and u scroll the background scrolls up or down correspondingly, how do I stop that
Jochem
Jochemā€¢2y ago
I'd think twice about doing that honestly. Though if you can only open the nav when the page is at/near the top anyway, you can just set overflow to hidden on whatever container is appropriate, and remove it again when the nav closes
glutonium
glutoniumā€¢2y ago
yaa i just did that i first tried setting position fixed for the body but it snaps to the top when nav opnes but then i tried overflow hidden and apparently it works fine tnx ā¤ļø but why did u say, you'd think twice like is it bad?,
Jochem
Jochemā€¢2y ago
I wouldn't say bad, but I usually prefer to not take away functionality from users there's no real harm in being able to scroll, but also nothing terrible about turning it off mostly just preference I guess
glutonium
glutoniumā€¢2y ago
hmm gotcha xD tnx anyways
Want results from more Discord servers?
Add your server