Featuring a stunning full-width image:
.image {
background-image: url(http://cdn1.tnwcdn.com/wp-content/blogs.dir/1/files/2014/06/wallpaper_51.jpg);
background-position: center center;
background-repeat: !important;
position: absolute;
width: 100%;
height: 100%;
background-size: cover;
background-color: #2b6c72;
}
A hidden menu is positioned above the image, accessible through a button in the top right corner. When this menu is activated, it displaces the full-width image downwards.
Beneath the expansive image lies a vibrant green content area that usually sits below the image. However, when the hidden menu is launched, the content area overlaps the image instead of shifting down.
#content-wrapper {
top: 100%;
position: absolute;
width: 100%;
max-width: 1280px;
height: 400px;
background: #3C9;
margin: 0px auto;
left: 0;
right: 0;
}
QUERY - How can I make the content area shift downwards rather than overlaying the image when the menu is open?
For a live demonstration, check out the fiddle