Blur effect on wordpress website menu and submenu

i have been trying to get a blur effect on my website sticky menu and submenu. The editor i am using is Wordpress pagelayer. I asked first from chatgpt, and this is the answer i got:

#menurow {
  background-color: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: relative;
  z-index: 1000;
}

#menurow ul.sub-menu {
  background-color: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 8px;
  padding: 10px;
  z-index: 1001;
  position: absolute;
}

since pagelayer doesn,t have a feature to blurr specifically different elements, i used CSS. But when i used it, only one or the other got blurred if i removed the effect from either one, so not simultaneously. It then asked if i had the Z-index correctly, and i checked that, nothing changed, asked if backgrounds were different in any way checked that too. What should i do so that both the primary menu and the submenu are blurred the same way that the background under it is blurred?

Solution

With your code Each layer (menu and submenu) must be visually separate and not overlap each other’s blur area. Both must have transparent backgrounds + the backdrop-filter.

So Adjust your code to:

#menurow {
  background: transparent;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: relative;
  z-index: 1000;
}

#menurow::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.4);
  z-index: -1;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#menurow ul.sub-menu {
  background: transparent;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 8px;
  padding: 10px;
  z-index: 1001;
  position: absolute;
}

#menurow ul.sub-menu::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.4);
  z-index: -1;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 8px;
}