mobile css menu - navigataur

_menu-mobile.scss

/**************
NAVIGATAUR MENU - condensed
**************/

#toggle {display: none;}

.toggle {
        z-index: 3;
        display: block;
        position: relative;
        cursor: pointer;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
        color: $white;
        margin-top: -3px; /* adjust depending on your font */

        &:after {
            content: '\2630';
            display: block;
            padding: 8px 20px;
            text-align: center;
            right:0;
            bottom:0;
            position:absolute;
            @include transition(background 0.5s linear);
        }

        &:hover:after {
            background: darken($blue,20%);
        }
    }

#toggle:checked + .toggle:after {content: '\2630';}

#toggle:checked ~ .top-nav {
    display: block;
    opacity: 1;
    @include transition(all 0.5s ease-in-out);
    max-height:900px; //if some menu items are cut out, increase this value
    border-top: 1px solid $blue;
} 

.top-nav{
    margin:0;
    @include transition(all 0.9s ease-in-out);
     /* rules below are necessary to navigataur, integrate in your .nav class */
    opacity: 0;
    max-height:0px;
    overflow:hidden;


    li {

        a {
            display: block;
            text-decoration: none;
            padding: 5px 10px;
            border-bottom: 1px solid $blue;

            /*
            remember this is for mobile ONLY, so there's no need
            to even declare hover styles here, you can do it in
            the style.scss file where it's relevant. We want to
            keep this file as small as possible!
            */
            &:hover, &:focus {
                background-color: $gray;
            }
        }

        &:first-child {}

        &:last-child {}

        /*
        so you really have to rethink your dropdowns for mobile.
        you don't want to have it expand too much because the
        screen is so small. How you manage your menu should
        depend on the project. Here's some great info on it:
        http://www.alistapart.com/articles/organizing-mobile/
        */
        ul.sub-menu,
        ul.children {
            margin:0;
            li {

                a {
                    padding-left: 30px;

                    &:hover,
                    &:focus {

                    }

                    &:link {}

                }

                &:first-child {}

                &:last-child {}

            }

        }

    } /* end .menu li */

    /* highlight current page */
    li.current-menu-item,
    li.current_page_item,
    li.current-page-ancestor {

        a {}

    }  /* end current highlighters */
}