.site--header { background: $theme; width: 100%; position: fixed; top: 0; left: 0; z-index: 11; @media (min-width: 1200px) { .d-sw-block { display: block !important; } .d-sw-flex { display: flex !important; } .d-sw-none { display: none !important; } .col-sw-2 { flex: 0 0 auto; width: 16.6666666667%; } } a { color: #fff; display: inline-block; @extend %defaultTransition; span { color: #fff; } } .logo { display: flex; justify-content: flex-start; align-items: center; a { display: block; width: 100%; max-width: 150px; svg { display: block; width: 100%; } } } .links { display: flex; justify-content: center; align-items: center; li { margin: 0 10px; @extend %defaultTransition; a { padding: 20px; white-space: nowrap; @media (max-width: 1420px) { font-size: 14px; padding: 21px 8px; } @media (max-width: 1120px) { font-size: 14px; padding: 21px 4px; } } &.active { border-bottom: 2px solid #fff; } } } .account { // display: flex; justify-content: flex-end; align-items: center; a { padding: 20px 0; display: flex; justify-content: flex-end; align-items: center; span { margin-left: 5px; } } } .menu { i { display: inline-block; padding: 20px 0; font-size: 20px; color: #fff; cursor: pointer; @extend %userSelect; } } .dropDown-container { position: relative; cursor: pointer; i { display: inline-block; @extend %defaultTransition; } &.d-active { i { @include transform(rotate(180deg)); } .drop-down { height: 113px; border-top: 1px solid rgba(#fff, 0.1); } &.agents { .drop-down { height: 169px; } } &.gps{ .drop-down { height: 169px; } } &.contactus { .drop-down { height: 290px; } } } .drop-down { position: absolute; top: 65px; right: -5px; background: $theme; min-width: 160px; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; overflow: hidden; height: 0; @extend %defaultTransition; a { display: block; padding: 15px 20px; &:hover { background: rgba(#fff, 0.05); } &.active { background: rgba(#fff, 0.1); } } } } }