How to Dim Content on Menu Hover?

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 following CSS. With this, visitors will have an increased focus on the navigation menu and it’s better for conversion.

/* 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;

Above CSS can be added to the customizer under Additional CSS tab or in the child theme’s style.css file.

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

Related Docs

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.