Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
.astroid-nav .megamenu-container a.nav-link.megamenu-title:hover {
background: inherit !important;
color: currentColor !important;
}
/* Header Section */
.astroid-header-section {
width: 100%;
left: 0;
z-index: $header-section-zindex;
/* Header Element */
header {
&.astroid-header {
padding: $header-padding-y $header-padding-x;
z-index: 1;
}
/* Stacked Header */
&.header-stacked {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: none;
background: $stacked-header-bg;
z-index: $stacked-header-zindex;
}
}
/* Sticky Header */
.astroid-header-sticky {
position: fixed;
top: 0;
left: 0;
width: 100%;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
z-index: $sticky-header-zindex;
-webkit-animation-duration: $sticky-header-animation-duration;
animation-duration: $sticky-header-animation-duration;
border-bottom: $sticky-header-border-bottom;
box-shadow: $sticky-header-shadow;
> div{
padding-top: $sticky-header-padding-y;
padding-bottom: $sticky-header-padding-y;
}
&.d-flex {
-webkit-animation-name: slideInDown;
animation-name: slideInDown;
}
.astroid-logo {
.astroid-logo-default {
display: none !important;
}
.astroid-logo-sticky {
@include media-breakpoint-between(lg, xl) {
display: block !important;
}
}
}
}
}
.astroid-logo {
@include media-breakpoint-down(md) {
.astroid-logo-default {
display: none;
}
}
img {
max-width: 250px;
max-height: 65px;
}
.astroid-logo-mobile {
max-width: 100%;
display: none;
@include media-breakpoint-down(md) {
display: block;
}
}
.astroid-logo-sticky {
display: none;
}
}
.fixed-header {
.astroid-logo {
.astroid-logo-default,
.astroid-logo-mobile {
display: none;
}
.astroid-logo-sticky {
display: block;
}
}
}
.astroid-stacked-seperated-header {
.astroid-logo-image {
img {
margin: auto;
}
}
}
/* Sidebar Header */
#astroid-header {
&.has-sidebar {
position: fixed;
width: $header-sidebar-width;
top: 0;
height: 100%;
z-index: 1;
-webkit-transition: .1s linear all;
-moz-transition: .1s linear all;
-ms-transition: .1s linear all;
-o-transition: .1s linear all;
transition: .1s linear all;
box-shadow: 0 0 2px 0 rgba(56,69,84,.2);
@media(max-width: 1200px) {
width: $header-sidebar-mini-width;
}
&.sidebar-dir-left {
left: 0 !important;
right: auto !important;
}
&.sidebar-dir-right {
right: 0 !important;
left: auto !important;
}
> .container {
height: 100%;
> .row {
height: 100%;
.astroid-column {
> div {
height: 100%;
}
}
}
}
.astroid-sidebar-logo {
margin: 15px 0;
}
.astroid-logo {
margin: 0 auto !important;
justify-content: center;
}
.astroid-sidebar-mobile-menu {
display: none;
}
.astroid-sidebar-block {
padding: 10px 15px;
}
}
@media (min-width: 1200px) {
.astroid-sidebar-content {
display: flex;
flex-direction: column;
}
.astroid-sidebar-block {
margin-top: auto;
}
}
@media (max-width: 1200px) {
&.has-sidebar {
.astroid-sidebar-mobile-menu {
display: block;
}
}
}
@media (max-width: 1200px) {
&.has-sidebar {
display: block;
width: 100%;
position: relative;
padding: 15px 0;
.astroid-sidebar-logo {
display: flex;
padding: 0 15px;
align-items: center;
}
}
}
.dropdown-menus {
max-width: $header-sidebar-width;
}
.astroid-sidebar-content {
overflow-y: auto;
.astroid-sidebar-logo {
// height: 150px;
}
}
.astroid-sidebar-collapsable {
padding: 1rem;
font-size: 24px;
justify-content: flex-end;
cursor: pointer;
display: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
> i {
width: 22px;
text-align: center;
display: block;
&:before {
content: "\f0c9";
}
}
}
@media(max-width: 1200px) {
.astroid-sidebar-content {
> div.astroid-sidebar-menu {
display: none;
}
> div.astroid-sidebar-block {
display: none;
}
}
&.expanded {
width: $header-sidebar-width !important;
-webkit-transition: .1s linear all;
-moz-transition: .1s linear all;
-ms-transition: .1s linear all;
-o-transition: .1s linear all;
transition: .1s linear all;
.astroid-sidebar-collapsable {
> i {
&:before {
content: "\f00d";
}
}
}
.astroid-sidebar-logo {
display: block;
}
.astroid-sidebar-content > div.astroid-sidebar-menu {
display: block;
}
.astroid-sidebar-content > div.astroid-sidebar-block {
display: block;
}
}
}
}
@media(min-width: 1200px) and (max-width: 1600px) {
body{
&.header-sidebar-left{
margin-left: 320px;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.