Sub-dropdown menu styling (child menu)

[gstertz]

I’m probably just missing it, but is there a way to address the styling of the sub-dropdown menu? For instance I’m trying to create space between the dropdown and the child menu, but I’m not sure how to do it. I’ve adjusted margins, but it doesn’t affect a gap/position between the two.

[prakash_s]

Hello @gstertz,

Thanks for writing to us.

I would suggest you go to the Navigation dropdown element -> Customize -> Element CSS and add this custom CSS code.

$el.x-dropdown.x-menu ul.sub-menu.x-dropdown{
  margin-right:20px !important;
}

The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector. If you have no idea about coding, you can subscribe to One, where customization questions are answered.

Hope it helps.
Thanks

[gstertz]

Thank you! ! Any idea why I can’t get the blur effect to work on the sub dropdown?

.x-dropdown 
{
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);

}


.x-dropdown.x-menu ul.sub-menu.x-dropdown {
  margin:10px -10px 0px 0px !important;
background-color: rgba(72 50 250 / 87%);
box-shadow: 0em 0.15em 2em 0em rgba(0, 0, 0, 0.15);
transition-duration: 500ms, 500ms, 0s;  
  	color:black!important;
backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

[ruenel]

Hey @gstertz,

Set the opacity if your background color to at least 50% or less and increase the blur to more than 20 pixels to see the effect.

Be advised that custom CSS coding is beyond the scope of our support under our Support Policy. If you are unfamiliar with code and resolving potential conflicts, you may select our One service for further assistance.

Best Regards.

[gstertz]

Not sure if I’m following you. Here’s what I’ve got but the blur doesn’t affect the element. If I change the opacity to less, it makes the whole thing transparent

:

[ruenel]

Hello @gstertz,

It’s not adding CSS opacity into your code.

• Your .sub-menu.x-dropdown has rgba(72 50 250 / 87%) (87% opacity).
• backdrop-filter requires transparency to blur what’s behind it.

Still, it will not work because the main limitation of backdrop-filter: blur() is that it operates within CSS stacking contexts, meaning it only affects content behind its own element’s stacking context. We already have menu dropdown with a backdrop-filter on it and then we have place a subemenu dropdown that is visually outside the parent dropdown’s bounds, the submenu dropdown element’s backdrop-filter will only blur the content within the parent’s bounds, not the content on the body or other elements that are visually behind it.

Hope this makes sense.

[gstertz]

Gotcha. Thanks for looking into it. Not a big deal. Just wanted to see if it was possible.

[christian]

You’re welcome.