No results found. Try again with different words?

Search must be at least 3 characters.

Dim Content on Menu Hover

Astra Starter Sites

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.

Was this article helpful?
Did not find a solution? We are here to help you succeed.

Related Docs

Astra is Free. Now & Forever.

We believe creating beautiful websites should not be expensive. That's why Astra is free for everyone. Get started for free and extend with affordable packages.

REWIND

YEAR IN REVIEW

Download is Just A Click Away!

Enter your email address and be the first to learn about updates and new features.

Download Free Astra Theme - Modal Popup Form
Scroll to Top
Now choose your preferred
page builder addon
Choose your preferred page builder addon

Download is Just A Click Away!

Enter your email address and be the first to learn about updates and new features.

Download Free Astra Theme - Modal Popup Form