.main-panel { height: calc(100vh - 66px); min-height: calc(100vh - 66px); > .container { min-height: calc(100% - 76px); padding-left: 16px !important; padding-right: 16px !important; } .overlay { min-height: 175px; } } .topbar_open { .main-panel { transition-delay: 0.1s !important; } #menuIconHeader { transform: translate3d(0, 63px, 0) !important; } } .container-futuristic { margin-top: -175px !important; } .page-wrapper { border-radius: 5px !important; } .page-inner { padding: 0 !important; border-radius: 5px; margin-bottom: 30px; overflow: hidden; &.page-inner-futuristic { background: #fff; padding: 1.5rem !important; min-height: 100vh; } } .navbar-header { .more { background: transparent; border: 0; font-size: 22px; padding: 0; color: #fff; } .navbar-nav .nav-item .nav-link { color: #fff; } .page-navigation > .nav-item > .nav-link .menu-title { color: #fff !important; opacity: 1; } } @media screen and (max-width: 1200.5px) { .page-sidebar { right: -16px; border-radius: 5px; } .pagesidebar_open .page-sidebar { transform: translate3d(-16px, 0, 0) !important; } } @media screen and (min-width: 992px) { .btn-toggle { display: none; } .topbar-toggler { display: none; } .container { &.container-futuristic { padding-left: 15px !important; padding-right: 15px !important; } } } @media screen and (max-width: 991.5px) { .main-header { min-height: 65px; .navbar-header { min-height: 65px; } .nav-controls { position: relative; width: 100%; display: flex; justify-content: center; align-items: center; } } #menuHeader { height: 100%; width: 100%; position: fixed; z-index: 1200; left: 0 !important; right: 0; top: 0; margin-top: 0px; overflow-y: auto; .body-overlay { display: none; } .page-navigation { min-height: 100vh; width: 275px; max-width: calc(100% - 40px); padding-bottom: 60px; overflow-y: auto; overflow-x: hidden; display: block; z-index: 2001; position: relative; -webkit-transform: translate3d(-275px, 0, 0); -moz-transform: translate3d(-275px, 0, 0); -o-transform: translate3d(-275px, 0, 0); -ms-transform: translate3d(-275px, 0, 0); transform: translate3d(-275px, 0, 0) !important; transition: all 0.5s; .title-menu { font-size: 14px; margin: 0; color: #fff; height: 56px; display: flex; align-items: center; padding: 0 20px; position: relative; font-weight: 300; text-transform: uppercase; border-bottom: 1px solid rgba(255, 255, 255, 0.1); .close-menu { color: #fff; position: absolute; top: 50%; right: 15px; transform: translateY(-50%); cursor: pointer; font-size: 18px; } } > .nav-item { width: 100%; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding: 0; &:first-child > a { margin-left: 0; } &.active { &:before { width: 100%; } } > .nav-link { width: 100%; position: relative; padding-left: 18px; padding-right: 18px; border-radius: 0; } .navbar-dropdown { position: relative; top: 0; border: 0; box-shadow: none; ul { padding: 15px 25px !important; } } &.submenu { > .nav-link { &:after { position: absolute; right: 35px; height: unset; } } } &.mega-menu { .navbar-dropdown { padding: 5px !important; } } .category-heading { padding-top: 0px; } &.show-submenu { .navbar-dropdown { display: block; } } &:not(.show-submenu) { > .nav-link { &:after { transform: rotate(0deg) !important; } } } } &.page-navigation-style-2 { > .nav-item { flex-direction: column; margin-bottom: 10px; > .nav-link { } .navbar-dropdown { width: 100%; margin-top: 5px; } } } } &.show { .page-navigation { -webkit-transform: translate3d(0px, 0, 0); -moz-transform: translate3d(0px, 0, 0); -o-transform: translate3d(0px, 0, 0); -ms-transform: translate3d(0px, 0, 0); transform: translate3d(0px, 0, 0) !important; } .body-overlay { display: block; } } } #menuIconHeader { position: absolute; width: 100%; z-index: 1001; transition: all 0.5s ease 0s; transform: translate3d(0px, -70px, 0px) !important; min-height: 62px; display: flex; } .navbar-header { .nav-toggle { display: block; position: absolute; left: 15px; } .more { position: absolute; right: 15px; } .navbar-brand { position: absolute; left: 50%; transform: translateX(-50%); } } }