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.