Extend menu see through area

[greenmed21]

Hi Bill!

My client was wondering if there was a way to extend all the way to the end of the page the black see-through box that pops up behind the menu? She would rather not see the bright contrast of the images with the dark backdrop.

Thank you!

[Bill Robbins]

Good Morning,

Great question. I believe we may be able to do that. Try adding this snippet to the Custom CSS box that’s at the bottom of the Advanced tab in the Theme Options page:

@media only screen and (min-width: 768px) {
	
	#content {
		position: relative;
		z-index: 2;
		background: transparent;
	}
	
	#content::before {
		content: "";
		display: block;
		height: 100%;
		min-height: 100%;
		position: fixed;
		top: 0;
		right: 0;
		width: calc(100% - 300px);
		z-index: -1;
		background-color: rgba(0, 0, 0, 0.8);
		
		-webkit-animation-duration: 1s;
		animation-duration: 1s;
		-webkit-animation-delay: 1.3s;
		-moz-animation-delay: 1.3s;
		animation-delay: 1.3s;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
		-webkit-animation-name: fadeIn;
		animation-name: fadeIn;
	}

}

Hopefully that will remove the original background and add in a larger one for browsers 768 pixels wide and larger. Let me know if you run into trouble there.

Thanks,
Bill

[Author]

Posts