.menu-button-rometheme{
transition: all 0.5;
background-color: transparent;
padding: 10px;
display: flex;
align-items: center;
}
li.submenu-item {
padding-left: 0.5rem;
padding-right: 0.5rem
}
div.header {
display: flex;
justify-content: space-around;
align-items: center;
}
div.mobile-header {
display: none;
}
nav.off-canvas {
display: none;
}
div.menu-offcanvas {
display: none;
}
.rkit-offcanvas-close {
position: relative;
float: right;
z-index: 9999;
display: flex;
align-items: center;
}
a.menu-button {
text-decoration: none;
border-bottom: none;
}
.dropdown-content {
opacity: 0;
margin-top: 20px;
animation: fade_in 1s;
}
.offcanvas-navmenu-rometheme {
width: 100%;
position: fixed;
display: flex;
top: 0;
height: 100%;
z-index: 999;
}
.overlay-rometheme {
background-color: rgba(0, 0, 0, 0.328);
position: absolute;
top: 0;
width: 100%;
height: 100vh;
z-index: 998;
}
.menu-offcanvas-rometheme {
z-index: 9999;
background-color: white;
width: 75%;
}
.rkit-btn-container{
display: flex;
}
#nav-menu>li>ul {
list-style-type: none;
padding: 1rem;
display: none;
visibility: hidden;
opacity: 0;
transition: all 2s ease-in;
}
#nav-menu>li {
display: flex;
justify-content: center;
height: 100%;
}
#nav-menu>li:hover ul {
display: block;
position: absolute;
visibility: visible;
opacity: 1;
}
#nav-menu>li:hover .dropdown-content {
opacity: 1;
margin-top: 0;
}
@keyframes fade_in {
from {
opacity: 0;
margin-top: 20px;
}
to {
opacity: 1;
margin-top: 0;
}
}
@media only screen and (max-width: 600px) {
div.header {
display: none;
}
div.mobile-header {
display: flex;
justify-content: space-between;
align-items: center;
}
nav.off-canvas {
display: block;
position: absolute;
top: 0;
left: -150%;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.328);
transition: 1s ease-in-out;
z-index: 999;
}
div.menu-offcanvas {
display: flex;
flex-direction: column;
background-color: white;
width: 75%;
height: 100vh;
left: 0;
top: 0;
color: black;
gap: .5rem;
padding: 1rem;
}
div.menu-header {
display: flex;
flex-direction: row;
justify-content: space-between;
}
div.menu-items {
display: flex;
flex-direction: column;
gap: .5rem;
}
}