Question 167496 in CSS Question posted in
Some basic documentation can be found here.

Css – Blurring Site Main Background when Header Menu is clicked

I am trying to add a blur effect to my site background when the header menu is clicked and active.

When my menu gets activated the .ct-active class gets added to it.

the below css code when written as is works for the items individually. I.e. when the menu is active the background of the menu becomes red and independent of the menu status the main site background is blurred.

.ct-active { // this is the menu when active
    background: red; 
}

.site-main { // this is the main site background
    filter: blur(5px)
}

However, I am trying to blur the background only when the menu is active. I tried the following but doesn’t seem to work. Any ideas on how to implement this?

.ct-active .site-main {
    filter: blur(5px)
}

PS. I am working in the additional CSS section of the WordPress customizer.
Thanks

.ct-active .site-main {
    filter: blur(5px)
}

Does not work

Tags:

2

Answers


  1. 0

    It is likely that the body background is on a higher level than the menu. So finding a style rule for the header that will affect parent element isn’t the right way to do when dealing with CSS (cascading).

    So javascript is the other option. I’ll assume that an element is active when the mouse is down. If that is not the case you can use other events (focus, blur, etc). BTW if your header element isn’t focusable just add a tabindex="0" to it.

    var header = document.querySelector("header");
// header.addEventListener('focus', () => document.body.classList.add("active"))
// header.addEventListener('blur', () => document.body.classList.remove("active"))

// I went with mousedown after all
header.addEventListener('mousedown', () => document.body.classList.add("active"))
header.addEventListener('mouseup', () => document.body.classList.remove("active"))
    body {
  background: blue;
  color: white;
}

body.active {
  background: navy;
}

header {
  background: darkred;
}

header:active {
  background: red;
}
    <body>
  <header tabindex="0">
    i am header, make me active
  </header>
  rest of body

</body>
    Login or Signup to reply.
  2. 0

    The code you tried using

    .ct-active .site-main {
    filter: blur(5px)
}

    targets "an element with the class site-main which is a descendant of an element with the class ct-active". But that isn’t the case, it’s the other way around.

    Ultimately, you’re trying to change the style of an high-level element based on the state of a descendant element – and this was traditionally impossible to do with CSS and is still not sufficiently supported.

    The best would be to alter the JS code that marks the menu element as active, and make it to also toggle a class in the <body> element or somthing else high up, which would allow you to target high-level elements based on it. I see there’s another answer going deeper into this approach.

    However, if you don’t have sufficient control over that piece of JS, and you want to use a CSS-only solution (taking in account that it’s still unsupported by some browsers, Firefox in particular, see here), you can use the :has selector:

    .site-main:has(.ct-active) {
    filter: blur(5px)
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search