Starting from Uncode version 2.9.1, if you are using on of the Horizontal Menu layouts, you can create modern, trendy menus with a translucent effect. This effect blurs the portion of the page running underneath the Main Menu, resulting in a sleek and sophisticated overlay. The trend of translucent menus has grown increasingly popular in web design, offering a modern aesthetic that enhances the overall user experience. Translucent menus add a sense of depth and sophistication, introducing a layer of elegance to the overall design. 

• Blurred translucent Navbar example

How it works

To activate the Blur effect, please navigate to Theme Options → Navbar → Visual → Menu Background Blur, screenshot .

You can activate the option by choosing from three types of behavior:

• Always: The Main Menu background is always blurred.
• Top: The Main Menu background is blurred only until you scroll.
• Sticky: The Main Menu background is blurred only when the menu becomes sticky.

Please note that this effect must be paired with a Transparent or Semi-Transparent Menu background. Ensure that you have set a Transparent Menu first.

To create a Semi-Transparent Menu, first set the menu to Transparent, then adjust the values in Theme Options → Customize → Light or Dark Skin → Primary Menu Bg Opacity to achieve the desired level of transparency, screenshot .

If you wish to adjust the blur intensity, you can use the following code and adjust the '75px' value to your needs:

.blur-menu-top #masthead:not(.is_stuck) .menu-container, 
.blur-menu-stuck #masthead.is_stuck .menu-container, 
.blur-menu-always .menu-container {
  backdrop-filter: blur(75px);
  -webkit-backdrop-filter: blur(75px);
}