Bootstrap provides a class to overlay the content and different style properties to make it appear more attractive. To fill the viewport or whole screen with .nav-bar change the height.
.navbar-nav{ min-height: 100vh; }
Example:
<!DOCTYPE html> < html >
< head >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< style >
body {
font-family: 'Lato', sans-serif;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
background-color: rgb(255, 255, 255);
background-color: rgba(0, 96, 128, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #000000;
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;
}
}
</ style >
</ head >
< body >
< div id = "myNav" class = "overlay" >
< a href = "javascript:void(0)" class = "closebtn"
onclick = "closeNav()" >×</ a >
< div class = "overlay-content" >
< a href = "#" >Login</ a >
< a href = "#" >SignUp</ a >
< a href = "#" >AboutUs</ a >
< a href = "#" >ContactUs</ a >
</ div >
</ div >
< h2 style="background-color:green;
color:white;
height:40px ">GeeksforGeeks
< span style="font-size:30px;
cursor:pointer;
float:right; "
onclick = "openNav()" >Menu</ span ></ h2 >
< h1 style="text-align:center;
color:green">Overlay the content</ h1 >
< script >
function openNav() {
document.getElementById(
"myNav").style.width = "100%";
}
function closeNav() {
document.getElementById(
"myNav").style.width = "0%";
}
</ script >
</ body >
</ html >
|
Output:
Desktop View:
Mobile View: