/*————————————
Side Header
————————————*/
/* Common styles of Side Header */ body .u-header.u-header–side {
position: fixed; top: 0; height: 100%; @include px-to-rem(width, 300px); // Navbar .navbar { flex-direction: column; // Container .container { width: 100%; padding-left: 0; padding-right: 0; flex-direction: column; } // Collapse .navbar-collapse { flex-direction: column; } // Nav .navbar-nav { width: 100%; flex-direction: column; margin-left: 0 !important; margin-right: 0 !important; } } // Sections Container .u-header__sections-container { height: 100%; } .dropdown-menu { top: 0; } .mCSB_container, .mCustomScrollBox { overflow: visible; }
}
/* Overlay */ .u-header–side .u-header__overlay {
position: absolute; top: 0; height: 100%; width: 2000%; opacity: 0; visibility: hidden;
}
body.u-body–header-side-opened .u-header__overlay {
opacity: 1; visibility: visible;
}
.u-body–header-side {
&-static-left, &-overlay-left, &-push-left { .u-header--side { .dropdown-menu { left: 100%; @include px-to-rem(margin-left, 15px); } // Override necessary HSMegaMenu styles .hs-menu-vertical .hs-mega-menu, .hs-menu-vertical .hs-sub-menu { @include px-to-rem(margin-left, 15px); .hs-mega-menu, .hs-sub-menu { margin-left: 0; } } .hs-menu-vertical.hs-rtl .hs-mega-menu, .hs-menu-vertical.hs-rtl .hs-sub-menu { margin-left: 0; @include px-to-rem(margin-right, 15px); .hs-mega-menu, .hs-sub-menu { margin-left: 0; margin-right: 0; } } } } &-static-left { @include px-to-rem(margin-left, 300px); .u-header--side { right: auto; left: 0; } } &-static-right { @include px-to-rem(margin-right, 300px); .u-header--side { left: auto; right: 0; } } &-overlay-left, &-push-left { .u-header--side { right: auto; @include px-to-rem(left, -300px); .u-header__overlay { left: 100%; } } &.u-body--header-side-opened { .u-header--side { left: 0; } } } &-push-left { &.u-body--header-side-opened { @include px-to-rem(margin-left, 300px); } } &-overlay-right, &-push-right { .u-header--side { left: auto; @include px-to-rem(right, -300px); .u-header__overlay { right: 100%; } } &.u-body--header-side-opened { .u-header--side { right: 0; } } } &-push-right { &.u-body--header-side-opened { @include px-to-rem(margin-right, 300px); } } &-static-right, &-overlay-right, &-push-right { .u-header--side { .dropdown-menu { left: auto; right: 100%; @include px-to-rem(margin-right, 15px); } // Override necessary HSMegaMenu styles .hs-menu-vertical .hs-mega-menu, .hs-menu-vertical .hs-sub-menu { left: auto; right: 100%; @include px-to-rem(margin-right, 15px); .hs-mega-menu, .hs-sub-menu { margin-right: 0; } } .hs-menu-vertical.hs-rtl .hs-mega-menu, .hs-menu-vertical.hs-rtl .hs-sub-menu { margin-right: 0; @include px-to-rem(margin-left, 15px); .hs-mega-menu, .hs-sub-menu { margin-left: 0; margin-right: 0; } } } }
}