OwlCyberSecurity - MANAGER

Edit File: _navigation.scss

/*------------------------------------*\
               NAVIGATION
\*------------------------------------*/

/*ul*/.site-navigation {
    @extend .nav;
    @extend .nav--stacked;
    margin-bottom: 0;
}

/*ul*/.site-navigation--main {
    text-transform: uppercase;
    overflow: hidden;

@include media(from hand) { 
        margin-top: -1px;
        border-top: 1px solid #333638;
    }

a {
        color: white;
    }
}

/*li*/.menu-item--main, .site-navigation--mobile .menu-item {
        border-bottom: 1px solid #333638;
        margin-top: -1px;
        overflow: hidden;
        // @include transition(all 300ms 300ms ease-in-out);
        // opacity: 0;
        // @include transform(translate3d(30%,0,0));

// &.js--is-loaded {
        //     opacity: 1;
        //     @include transform(none);
        // }

a {
            @include rem(padding, $half-spacing-unit $base-spacing-unit);

&:hover {
                color: white;
            }
        }

&.current-menu-item,
        &.current-menu-ancestor, &.current-menu-parent,
        &:hover, &:focus, &:active {
            
            & > a {
                color: $accent-color;
            }

&:after {
                border-top-color: $accent-color;
            }
        }
    }

/*li*/.menu-item--parent, .site-navigation--mobile .menu-item-has-children {
        position: relative;

&:after {
            content: "";
            width: 0;
            height: 0;
            position: absolute;
            @include rem(top, $base-spacing-unit - 2px);
            @include rem(right, $half-spacing-unit);
            @include rem(border, 5px solid transparent);
            border-top-color: #4d4d4d;
            pointer-events: none;
            // @include transition(all .2s bezier(easeInOutCirc));

.header-transparent & {
                @include rem(top, 3/2 * $half-spacing-unit - 2px);
            }
        }

@include media(from hand) {
            & > ul {
                display: none;
            }

.touch & > ul {
                display: block;
            }
        }
    }

#navigation {
    @include media(from hand) {
        @include rem(margin-left, -1 * $base-spacing-unit);
    }
}

/*-----------------------------------*\
               SUB MENUS
\*-----------------------------------*/

/*ul*/.site-navigation__sub-menu {
    @extend .nav;
    @extend .nav--stacked;
    font-style: italic;
    // display: none;
}

/*li*/.menu-item--sub-menu-item, .site-navigation--mobile .sub-menu .menu-item{
        color: #a7a7a7;
        font-style: italic;
        line-height: 1.2;
        @include rem(margin, $half-spacing-unit/2 0 $half-spacing-unit $half-spacing-unit);

.menu-item {
            margin-bottom: 0;
        }

&.menu-item--parent {

&:after {
                @include rem(top, 5px);
            }

&:hover:after {
                border-bottom-color: white;
            }
        }

a {
            color: #a7a7a7;
            @include rem(padding, 0 $base-spacing-unit); 
            @include transition(all .2s ease-out);
        }

&:hover, &:focus, &:active {

& > a {
                color: white;
            }
        }

&.current-menu-item > a {
            color: white;
        }
    }

.site-navigation--mobile .sub-menu .menu-item{
        border-bottom: none;
    }

/*ul*/.site-social-links {
    @extend .nav;
}

.current-menu-item,
.current-menu-ancestor,
.current-menu-parent, {
    > ul{
        display: block;
    }
}

/*----------------------------------------*\
    $MOBILE NAVIGATION
\*----------------------------------------*/

$header_height: 3*$base-spacing-unit;
$header_background: white;
$transition_speed: 0.4s;

.navigation--mobile, .site-navigation__trigger {
    display:none;
}

@include media(to hand) {

.navigation--mobile{
        display:block; 
    }

.header__inner-wrap{
        display: none;
    }

.header{
        position: absolute;
        width: 100%;
        @include rem(height, $header_height);
    }

.site-header {
        float:left;
    }

#page{
        overflow: hidden;
    }

// Hide the rest of the elements
    .navigation--top,
    .navigation--main,
    .header-bar-container {
        display: none;
    }

/*
    * Menu Styling
    */

.navigation--mobile{
        background-color: $dark;
        @include rem(padding-right, $base-spacing-unit);
        @include rem(padding-left, $base-spacing-unit/2);

width: 75%;
        position: absolute;
        top: 0;
        right: 0;
        visibility: hidden;
        z-index: -1;
        overflow-y: scroll;

@include transition(visibility 0 linear $transition_speed);

> ul > li{
            &:last-child{
                border-bottom: none;
            }

a{
                @include rem(padding, $base-spacing-unit/4 $base-spacing-unit);            
            }
        }

> ul > .menu-item{
            width: 100%;
            border-bottom: 1px solid black;

a{
                display: block;
                color: white !important;
            }
        }

.menu-item a{
            @include rem(padding-top, $base-spacing-unit/2);
            @include rem(padding-bottom, $base-spacing-unit/2);
            text-decoration: none;
        }

// Bigger target area for links
        .sub-menu {
            margin-bottom:$half-spacing-unit;

li.menu-item {
                margin:0;
                a {
                    padding:$half-spacing-unit $half-spacing-unit;
                    display:block;
                }
            }
        }
    }

.separator--mobile-nav{
        height: 1px;
        background-color: $gray;
        @include rem(margin, $base-spacing-unit/2 0);
    }

/* 
    * Trigger Icon
    */
    .site-navigation__trigger {
        display: block;
        @include rem(width, 95px);
        @include rem(height, $header_height);
        padding:$half-spacing-unit $base-spacing-unit;
        position: absolute;
        top: 0; right: 0;
        z-index:10;
        @include font-size(42px);
        text-align: center;
        cursor: pointer;
        color: #807f7d;

@include transition(color $transition_speed ease-in-out);

&:active, &:focus {
            @include transition(color $transition_speed ease-in-out);
        }

// Icon Styling
        & {
          @include transition(all $transition_speed);
          cursor: pointer;
          user-select: none;
          opacity: .8;
        }

.nav-icon {
          position: relative;
          top:20px;
          display:block;
          width: 100%;
          height: 6px;
          background: $gray;
          border-radius: 2.5rem;
          @include transition(all $transition_speed);
          
          &:after, &:before {
            display: block;
            content: "";
            height: 6px;
            width: 100%;
            background: $gray;
            position: absolute;
            z-index: -1;
            border-radius: 1rem;
            @include transition(all $transition_speed);
          }

&:after { top: -$half-spacing-unit; }
          &:before { top: $half-spacing-unit; }

}
    }

/*
    * Content Preparation
    */
    .wrapper {
        height: 100%;
        min-height: 350px;
        background-color: white;

position: relative; 
        z-index: 1;
        @include transform(translateZ(0));
        @include transition(transform $transition_speed ease-in-out);
    }

/*
    * Showing Navigation (by moving .wrapper)
    */

.navigation--is-visible {

.wrapper {
            @include transform(translateX(-75%));
        }

.navigation--mobile{
            height: 100%;
            visibility: visible;
            z-index: 1;
            @include transition(z-index 0 linear $transition_speed);
        }

// Trigger icon animations 
        &.no-android-browser .nav-icon { 
            background: transparent;
            top:20px !important;

&:before { @include rotate(-45deg); top: 0 !important; }  
            &:after { @include rotate(45deg); top: 0 !important; }  
        }
   
    }
}