One of the features on my website is an overlay that slides in from right to left when the user clicks on the "Open" text. Currently, this overlay covers the entire page.
The overlay has a class name of Overlay, and its contents are located under .overlay-content
However, I want to adjust the overlay so that it only covers half of the page.
Below is the code snippet:
function openNav() {
document.getElementById("myNav").style.left = "50%";
}
function closeNav() {
document.getElementById("myNav").style.left = "100%";
}.overlay {
height: 100%;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 100%;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.5);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
float: left;
position: relative;
top: 25%;
width: 50%;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #f1f1f1;
display: block;
transition: 0.3s;
}
.overlay a:hover,
.overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
@media screen and (max-height: 450px) {
.overlay a {
font-size: 20px
}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
Check out the image below for the desired outcome: Expectedoverlay Actual result Overlaywholewidth Any assistance would be greatly appreciated.