#banner { position: fixed; background-color: $w; width: 100%; z-index: 1000; box-shadow: 0 0 5px $b!important; .toggled &{ padding-right: 250px; @media (max-width: 991px) { padding-right: 0px; } } .toggled.lfr-has-add-content & { padding-right: 600px; @media (max-width: 991px) { padding-right: 0px; } } .lfr-has-add-content & { padding-right: 350px; @media (max-width: 991px) { padding-right: 0px; } } #heading { @include display-flex(); @include justify-content(space-between); @include align-items(center); .site-title { flex: 1; margin: 0; .logo-img { height: $height-header; width: auto; } } .page-title { margin: 0; padding:2px 0; .img-site { height: $height-header; width: auto; } } .navigation { @include display-flex(); @include justify-content(flex-end); @include align-items(center); flex: 1; .main-menu { ul { list-style-type: none; @include display-flex(); @include justify-content(flex-end); @include align-items(center); padding: 0; margin: 0; li { padding-left: 10px; padding-right: 10px; a { text-decoration: none; color: $header-menu; font-weight: 200; text-transform: uppercase; font-size: em(12px); font-family: $second-font; b { transition: color $speed; } } } } } .button-menu-right { margin-left: 0px; margin-right: 10px; width: 45px; height: 35px; padding-left: 8px; padding-right: 8px; background-color: $header-menu; border-color: $header-menu; border-radius: 0; .toggle { .toggle-line { display: block; height: 4px; margin-bottom: 4px; background-color: $w; transition: transform .5s; border-radius: 25px; } } &:hover { .toggle-line:nth-child(1), .toggle-line:nth-child(3) { transform: scaleX(.7) translateZ(0); } } } } } } .toggled .button-menu-right { .toggle-line:nth-child(1) { transform: translate3d( 0, 8px, 0) rotate(45deg); } .toggle-line:nth-child(2) { opacity: 0; visibility: hidden; transition: opacity .5s, visibility .5s!important; } .toggle-line:nth-child(3) { transform: translate3d( 0, -8px, 0) rotate(-45deg); } &:hover { .toggle-line:nth-child(2) { opacity: 1; visibility: visible; } } } .aui { .notification-header { position: relative; .notification-header__icon { font-size: 20px; padding-left: em(25px, 20px); padding-right: em(35px, 20px); } #_2_WAR_notificationsportlet_userNotifications { position: absolute; width: 100%; height: 100%; right: 0; top: 0; list-style: none; .dockbar-user-notifications-container { background-color: $w; width: 100%; } .dropdown-toggle.user-notification-link { height: 100%; width: 100%; top: 0px; left: 0px; position: absolute; color: $b; #_2_WAR_notificationsportlet_userNotificationsCount { font-size: 12px; position: absolute; width: em(20px, 12px); height: em(20px, 12px); top: -15px; right: 25px; background-color: $red-logo; border-radius: 50px; @include display-flex(); @include justify-content(center); @include align-items(center); border: none; color: $w; } } .dockbar-user-notifications-container { width: em(270px); position: absolute; top: 55px; right: 15px; .user-notifications-list { border: 0px solid transparent; .user-notification-header { border-color: $b; span { a { font-family: $second-font; color: $b; } } } .user-notification { .message { font-family: $second-font; color: $b; } } } } .dockbar-user-notifications-container.open { .user-notifications-list { border: 1px solid $header-menu; width: 100%; } } } } } .dockbar-user-notifications .user-notifications-header { border-color: $b; span { a { font-family: $second-font; color: $b; } } } .dockbar-user-notifications .user-notification { border-color: $b; span { a { font-family: $second-font; color: $b; } } } header { transition: all .5s ease; top: 0; } main { padding-top:90px; } /* header.nav-up { top: -60px; @media (max-width: 991px) { top: 0px; } } */ header.nav-up { top:0px; } .user-notification { margin: 0px!important; .user-thumbnail { box-shadow: 0 0 0 2px $red-logo!important; } } .aui { #heading { .navigation { nav { ul { @for $i from 1 through length($color-menu) { li:nth-child(#{length($color-menu)}n+#{$i}) { a:hover { text-decoration: none; b { color: nth($color-menu, $i); } } } li.selected:nth-child(#{length($color-menu)}n+#{$i}) { a {b { color: nth($color-menu, $i); }} } } } } } } }