Dim Content on Menu Hover

Liked how the menu is styled on hover in the above GIF? You can add a similar dim effect to the content on the menu hover with the CSS. With this, visitors will have an increased focus on the navigation menu and it’s better for conversion.

Why Use a Menu Hover Dim?

• Increased Focus: By momentarily dimming the content, the menu becomes the visual center of attention, directing visitors’ gaze towards navigation options.
• Improved Clarity: By reducing visual clutter, the navigation becomes easier to scan and understand, especially for users with visual impairments.
• Enhanced User Experience: The smooth transition creates a more polished and interactive feel, reflecting positively on your overall website quality.

How to Implement the Menu Hover Dim

Astra, have a built-in Customizer where you can directly tweak various settings. 

• From the WordPress dashboard, navigate to the “Appearance” section and find the “Customize” option.
• Within the Customizer, look for a tab or section labeled “Additional CSS”. This is where you can add your own CSS code to personalize your website’s styles.
• Copy and paste the following code snippet into the CSS editor:

/* Dim content on menu hover */
#masthead:hover~#content {
	opacity: 0.1;
	transition: all 0.5s linear 0.1s;
}

#content {
	transition: all 0.5s linear 0.1s;
}

• Click the “Publish” button to apply the changes.
• Go back to your website and hover over the menu to see the effect in action.

Remember to test and adjust the effect to match your website’s overall design and audience preferences.

We hope this document has been helpful. Please feel free to leave a comment below if you have any queries.