OwlCyberSecurity - MANAGER

Edit File: _header.scss

/*--------------------------------*\
               HEADER
\*--------------------------------*/

.header {
    @extend .inverse;
    width: 100%;
    position: absolute;
    z-index: 300;
    background-color: $dark;

@include media(to hand) {
        // when resizing from desktop to handheld nicescroll puts overflow: hidden on the header
        overflow: visible !important;
    }

@include media(from hand) {
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        overflow-y: auto;
        @include rem(padding-left, 2*$base-spacing-unit);
        @include rem(padding-right, $base-spacing-unit);
        @include rem(width, 250px);

&:before, &:after { 
            content: "";
        }

.lt-ie9 & {
            @include rem(padding-left, $base-spacing-unit);

&:before, &:after {
                content: none;
            }
        }
    }

// add the gradient stuff
    &:before, &:after {
        position: absolute;
        display: block;
        top: 0;
        height: 100%;
        z-index: 20;
        @include rem(width, 7px);
        @include rem(left, $base-spacing-unit);
    }
    
    // the actual gradient
    &:before {
        background-color: $other-color;
        background-size: 1px rem(7 * $base-spacing-unit);
        background-repeat: repeat-x;
        @include background-image(linear-gradient($accent-color 50%, $other-color));
        @include transition(height 1s .3s ease-in-out);

.lt-ie9 & {
            @include filter-gradient($accent-color, $other-color, vertical);
        }
    }

// the striped overlay
    &:after {
        background-size: 1px rem($base-spacing-unit/2);
        @include background-image(linear-gradient($dark 5%, $dark 91.66%, transparent 91.66%, transparent));

.lt-ie9 & {
            display: none;
        }
    }

a {
        text-decoration: none;
    }
}

.header__inner-wrap {

position: relative;
    z-index: 30;

@include media(to hand) {
        left: 100%;
        width: 75%;
        height: 100%;
        margin-left: 0;
        @include rem(margin-top, -3 * $base-spacing-unit);
        @include rem(padding, $half-spacing-unit $base-spacing-unit);
        padding-bottom: 0;
        background: $dark;
        overflow-y: auto;
        overflow-x: hidden;
    }
}

/*----------------------------------------*\
*   $TRANSPARENT
\*----------------------------------------*/

// this is for transitioning to and from the full screen gallery page
.header {
    @include transition(all .3s ease-in-out);
}

.loading .header-transparent .header {
    background-repeat: no-repeat;
    background-position: -300px 0;
}

@include media(from hand) {
    
    /*body*/.header-transparent{

.header{
            background-color: transparent !important;
            @include background-image(linear-gradient(left, rgba(0,0,0,0.4) 5%, rgba(0,0,0,0) 100%));
            @include rem(padding-bottom, $base-spacing-unit );

a{
                color: white !important;
            }

&:before, &:after{
                display: none;
            }

div {
                color: white;
            }            
        }

.header__inner-wrap{
            background-color: transparent !important;
        }

.site-header__branding{
            background: none;
            color: white;
        }

.site-navigation--main, .menu-item--main{
            border-top-color: transparent;
            border-bottom-color: transparent;
        }

.menu-item--parent:after{
            border-top-color: white !important;        
        }

.menu-header-menu-container .current-menu-item > a{
            font-weight: bold;
            color: white !important ;
        }

.menu-link{
            @include rem(padding-top, $half-spacing-unit/2);
            @include rem(padding-bottom, $half-spacing-unit/2);
        }

.sub-menu-link {
            @include rem(padding-top, $half-spacing-unit/4);
            @include rem(padding-bottom, $half-spacing-unit/4);
        }
    }
}

/*----------------------------------------*\
    $HEADER_INVERSE
\*----------------------------------------*/

/*body*/.header-inverse{
        #page, .header, .header__inner-wrap{
            background-color: #fff;  
        }

.header{
            @include media(to hand) {
                .site-header__branding{
                    border-bottom: 1px solid white;
                }
            }

&:before, &:after{
                display: none;
            }

a{
                color: $dark;
                
                &:hover{
                    font-weight: bold;
                    color: $dark;
                }
            }

div {
                color: $dark;
            }
        }

.current-menu-item > a{
            font-weight: bold;
            color: $dark !important ;
        }

.site-header__branding{
            background: transparent;
            color: $dark;
        }

.menu-item--parent:after{
            border-top-color: $dark;        
        }

.navigation--mobile{
            background: white;

a, .widget__title, .site-info {
                color: $dark !important;
            }
        }
    }

/*----------------------------------------*\
    $GALLERY-FULLSCREEN MENU MODS
\*----------------------------------------*/

.single-gallery-fullscreen{
    .site-logo{
        min-height: inherit;
    }
}

/*------------------------------*\
               LOGO
\*------------------------------*/

.site-header__branding {
    @include backface-visibility(hidden);
    @include perspective(1000px);
    overflow: hidden;

@include media(from hand) {
        @include rem(padding, 2*$base-spacing-unit 0);
        padding-left: 0;
        padding-right: 0;
    }
    
    @include media(to hand) {
        @include rem(height, 3 * $base-spacing-unit);

img {
            @include rem(max-height, 1.6*$base-spacing-unit);
        }
    }
}

.site-logo {
    display: block;
    text-transform: uppercase;
    @include font-size(30px);
    @include rem(min-height, 3 * $base-spacing-unit);
    font-weight: bold;

@include media(to hand) {
        @include rem(margin-top, 17px);
        @include rem(margin-left, 23px);
        min-height: 0;
        @include rem(max-height, 2 * $base-spacing-unit);
    }

h1 {
        margin: 0;
    }
}

@keyframes loading {
    0%  { background-size: 1px rem(12 * $base-spacing-unit); }
    50%  { background-size: 1px 100%; }
    100%  { background-size: 1px rem(12 * $base-spacing-unit); }
}

@-o-keyframes loading {
    0%  { background-size: 1px rem(12 * $base-spacing-unit); }
    50%  { background-size: 1px 100%; }
    100%  { background-size: 1px rem(12 * $base-spacing-unit); }
}

@-ms-keyframes loading {
    0%  { background-size: 1px rem(12 * $base-spacing-unit); }
    50%  { background-size: 1px 100%; }
    100%  { background-size: 1px rem(12 * $base-spacing-unit); }
}

@-moz-keyframes loading {
    0%  { background-size: 1px rem(12 * $base-spacing-unit); }
    50%  { background-size: 1px 100%; }
    100%  { background-size: 1px rem(12 * $base-spacing-unit); }
}

@-webkit-keyframes loading {
    0%  { background-size: 1px rem(12 * $base-spacing-unit); }
    50%  { background-size: 1px 100%; }
    100%  { background-size: 1px rem(12 * $base-spacing-unit); }
}