No results found. Try again with different words?

Search must be at least 3 characters.

Dim Content on Menu Hover

Sidebar Image

Did not find a solution? We are here to help you succeed.

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?
Sidebar Image

Did not find a solution? We are here to help you succeed.

Related Docs

Join 1,653,898+ Happy Site Owners Using Astra

Whether you are a beginner, small business owner, or professional web developer, Astra provides all the tools you need to easily build your beautiful WordPress website.

Download is Just A Click Away!

Membership Retention Checklist Download

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