Extend menu see through area

Support Area Forums Umami Extend menu see through area

This topic contains 1 reply, has 2 voices, and was last updated by  Bill Robbins 3 years, 5 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
URL to the page in question: http://bamboonoodle192.com/menu/
  • Author
    Posts
  • #35772

    greenmed21
    Participant

    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!

    #35796

    Bill Robbins
    Moderator

    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

Viewing 2 posts - 1 through 2 (of 2 total)

The topic ‘Extend menu see through area’ is closed to new replies.