Can anyone help me with creating a fullscreen menu (navbar) for mobile devices? I want the navbar to occupy the entire viewport when the hamburger menu is clicked.
I managed to achieve this by simply adding:
#navbarText{
height: 100vh;
}
However, the bootstrap animation is not as smooth as the default one. The animation should gradually increase or decrease the div size, like shown in this example:
https://i.sstatic.net/XFf1C.gif
Here is the code snippet:
/*---Standar Hamburger Menu (3 separate elements)---*/
.navbar-toggler {
border: none;
background: transparent !important;
}
.navbar-toggler:hover {
background: transparent !important;
}
.navbar-toggler .icon-bar {
height: 2px;
width: 22px;
border-radius: 1px;
display: block;
background-color: #B6B6B6;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.navbar-toggler .icon-bar+.icon-bar {
margin-top: 4px;
}
/*---Animation menu (create X)---*/
.navbar-toggler.x .icon-bar:nth-of-type(1) {
-webkit-transform: translateX(3px) rotate(45deg);
-ms-transform: translateX(3px) rotate(45deg);
-moz-transform: translateX(3px) rotate(45deg);
-o-transform: translateX(3px) rotate(45deg);
transform: translateX(3px) rotate(45deg);
-webkit-transform-origin: 10% 10%;
-ms-transform-origin: 10% 10%;
-moz-transform-origin: 10% 10%;
-o-transform-origin: 10% 10%;
transform-origin: 10% 10%;
}
.navbar-toggler.x .icon-bar:nth-of-type(2) {
opacity: 0;
filter: alpha(opacity=0);
}
... (more css rules)
If you have any suggestions on how to address this issue, please let me know. You can also check out and edit the code using Codeply.