WP Menu Design

_header.scss

/* ----------------------------------------------------------------------------
 * aa_nav
 *
 * Tabs object.
 *
 * 1. Tables (kinda) for layout!
 * 2. This is the magic bit; make all children occupy equal width.
 * 3. Required to make the tabs fill their container.
 * 4. Make each tab pack up horizontally.
 * 5. Ensure the hit area covers the whole tab.
 *
 * ------------------------------------------------------------------------- */
 
.aa_nav{
    display: table-cell;
    vertical-align: top;
    width: 75%;
    background: transparent;
    font: 1.5rem/1 u_reg;
    padding: 2.5rem 0 0;
    
    
    ul{
        margin:  0;
        padding: 0;
        list-style: none;
    }
    

     & > ul {
            
            display: table; /* [1] */
            table-layout: fixed; /* [2] */
            width: 100%; /* [3] */
            text-align: center;
            overflow: hidden; /* [1] */
            //height: 7rem;
            
            & > li {
                    display: table-cell;
                    vertical-align: middle;
                    //height: 5rem;
                    //min-width: 20vh;
                    
                    & > a{
                        display: block; /* [5] */
                        padding: 1.5rem;
                        //background: $c1;
                        color: $c2;
                        font-weight: bold;
                        text-decoration: none;
                        height: 7rem;
                        
                        &:hover {
                                    background: $c1;
                                    color: $c2;
                                    -webkit-transition: all 1s;
                                       -moz-transition: all 1s;
                                        -ms-transition: all 1s;
                                         -o-transition: all 1s;
                                            transition: all 1s;
                        }
                    }   
            }
        }    
}

.sub-menu{
    display: none;
    margin:  0;
    padding: 0;
    list-style: none;
    position: absolute;
    top: 9.5rem; /* This is equal to the top bottom margin of .aa_nav and height of a element inside it.*/
    width: 25vh;
    
    li{
        display: block;
        width: 100%;
        height: 5rem;
        text-align: left;
        
        a{
            display: block;
            padding: 1em;
            background: $c2;
            color: $c1;
            font-weight: bold;
            text-decoration: none;
            height: 5rem;
            
            &:hover {
                        background: $c1;
                        color: $c2;
                        -webkit-transition: 0.6s;
                           -moz-transition: 0.6s;
                            -ms-transition: 0.6s;
                             -o-transition: 0.6s;
                                transition: 0.6s;
            }
        } 
    }
}
/* ----------------------------------------------------------------------------
 * 1.1
 *     2.1
 * ------------------------------------------------------------------------- */

.menu-item-has-children {
    
    &:hover .sub-menu {
        display: block;
    }
    
    & > a:after {
        content: "\f107";
        font-family: "FontAwesome";
        padding: 2rem 0 0 1rem;
        color: lighten($c2,50%);
    }
}

/* ----------------------------------------------------------------------------
 * 2.1
 *     3.1
 * ------------------------------------------------------------------------- */
.sub-menu .menu-item-has-children{

    position: relative;

    & > .sub-menu{
        display: none !important; 
        position: absolute;
        top: 0rem;
        left: 25vh; /* This depends upon the width of .sub-menu*/
        li a{
            background: $c1;
            color: $c2;
            display: block;
            width: 100%;
            
            &:hover{
                background: $c2;
                color: $c1;
                -webkit-transition: 0.6s;
                   -moz-transition: 0.6s;
                    -ms-transition: 0.6s;
                     -o-transition: 0.6s;
                        transition: 0.6s;
            }
        }
    }

    &:hover > .sub-menu{
        display: block !important; 
        -webkit-transition: 0.6s;
                   -moz-transition: 0.6s;
                    -ms-transition: 0.6s;
                     -o-transition: 0.6s;
                        transition: 0.6s;
    }
}





/* ----------------------------------------------------------------------------
 * Slide
 * ------------------------------------------------------------------------- */
 @-webkit-keyframes slideDown {
    0% {
        -webkit-transform: translateY(-100%);
    }

    100% {
        -webkit-transform: translateY(0);
    }
}

@-moz-keyframes slideDown {
    0% {
        -moz-transform: translateY(-100%);
    }

    100% {
        -moz-transform: translateY(0);
    }
}

@-o-keyframes slideDown {
    0% {
        -o-transform: translateY(-100%);
    }

    100% {
        -o-transform: translateY(0);
    }
}

@keyframes slideDown {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(0);
    }
}

.aa_header.slideDown {

    transition: transform 200ms linear;
    -webkit-animation-duration: .5s;
    -moz-animation-duration: .5s;
    -o-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: slideDown;
    -moz-animation-name: slideDown;
    -o-animation-name: slideDown;
    animation-name: slideDown;
}

@-webkit-keyframes slideUp {
    0% {
        -webkit-transform: translateY(0);
    }

    100% {
        -webkit-transform: translateY(-100%);
    }
}

@-moz-keyframes slideUp {
    0% {
        -moz-transform: translateY(0);
    }

    100% {
        -moz-transform: translateY(-100%);
    }
}

@-o-keyframes slideUp {
    0% {
        -o-transform: translateY(0);
    }

    100% {
        -o-transform: translateY(-100%);
    }
}

@keyframes slideUp {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-100%);
    }
}

.aa_header.slideUp {

    -webkit-animation-name: slideUp;
    -moz-animation-name: slideUp;
    -o-animation-name: slideUp;
    animation-name: slideUp;
}

/* ----------------------------------------------------------------------------
 * Search Icon
 * ------------------------------------------------------------------------- */

.aa_search_wrap{
    display: table-cell;
    width: 5%;
    position: relative;
    font-size: 1.5rem;
    line-height: 1;
    vertical-align: middle;
    background: transparent;
    text-align: center;
    padding: 0 1rem;
    
}
 input, button {
   font-smooth: always;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 #aa_trigger {
   cursor: pointer;
   display: table;
   width: 100%;
   padding: 0; 
   margin: auto;
   border: 0; 
   outline: 0;
   background: transparent;
 }
 #aa_search {
   position: fixed;
   top: 0; left: 0; right: 0; bottom: 0;
   display: block;
   width: 100%;
   height: 100%;
   background:$c2;
   opacity: 0;
   visibility: hidden;
   transform: scale(3);
   transition: all 300ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
   &.aa_search_active{
     opacity: 1;
     visibility: visible;
     transform: scale(1);
   }
   .aa_input_wrap {
    padding: 0 15vh;
     //position: absolute;
     //top: 0; left: 0; right: 0; bottom: 0;
     //width: 100%; //height: 125px;
     margin: auto;
     display: table;
     width: 100%;
     height: 100%;
     .aa_search_input {
        display: table-cell;
        width: 90%;
        height: 100%;
        vertical-align: middle;
       //float: left;
       //width: calc(100% - 125px); //height: 125px;
       padding: 0; margin: 0;
       border: 0; outline: 0;
       background: transparent;
       font-family: r_thin;
       font-size: 5rem;
       color: $c1;
       //line-height: 125px;
       text-indent: 50px;
       &::-webkit-input-placeholder { color: rgba($c1,0.5); }
     }
     .aa_search_submit {
       display: table-cell;
       width: 5%;
       height: 100%;
       vertical-align: top;
       cursor: pointer;
       //float: left;
       //width: 125px; height: 125px;
       padding: 0; margin: 0;
       border: 0; outline: 0;
       background: transparent;
       font-size: 1.5rem;
       color: $c1;
       text-align: center;
       //line-height: 125px;
     }
   }
  #aa_search_close {
    display: table-cell;
    width: 5%;
    height: 100%;
    vertical-align: bottom;
     cursor: pointer;
     //position: absolute;
     //top: 0; right: 0;
     //width: 125px; height: 125px;
     padding: 0; margin: 0;
     border: 0; outline: 0;
     background: transparent;
     font-size: 1.5rem;
     color: $c1;
     text-align: center;
     //line-height: 125px;
   }
 }

functions.php

/*------------------------------------*\
	Functions
\*------------------------------------*/

// AA_Theme navigation
function aa_nav()
{
    wp_nav_menu(
    array(
        'theme_location'  => 'header-menu',
        'menu'            => '',
        'container'       => 'div',
        'container_class' => 'aa_menu_{menu slug}_container',
        'container_id'    => '',
        'menu_class'      => 'aa_menu ',
        'menu_id'         => '',
        'echo'            => true,
        'fallback_cb'     => 'wp_page_menu',
        'before'          => '',
        'after'           => '',
        'link_before'     => '',
        'link_after'      => '',
        'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
        'depth'           => 5,
        'walker'          => ''
        )
    );
}

header.php

<!-- nav -->
				<nav class="aa_nav">
					
					<?php aa_nav(); ?>
					

				</nav>
				
				
					<!-- .aa_search_wrap -->
<div class="aa_search_wrap">
					<button class="fa fa-search" id="aa_trigger"></button>
					<form 	id="aa_search" action="<?php echo home_url(); ?>"  method="get">
					  <div class="aa_input_wrap">
					    <input class="aa_search_input" type="search" name="s" placeholder="<?php _e( 'To search, type here and hit enter.', 'AA_Theme' ); ?>">
					    <button class="aa_search_submit fa fa-search" type="submit" value=""></button>
					    <button id="aa_search_close" class="fa fa-times" type="reset" value=""></button>
					  </div>
					  
					</form>
				</div>
				<!-- /.aa_search_wrap -->