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 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.