/*
 *  3.1 Toggle Nav
 * ----------------
 *
 * this is the top bar containing the toggle links for
 * off-canvas menu and sidebar, after the collapse
 */

@media screen and (max-width: $nav_collapse) {
    body,
    .top_menu {
        margin-top: 55px;
    }
}

.toggle_nav {
    display: none;

    .toggle{
        display: none;
    }

    @media screen and (max-width: $nav_collapse) {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 104;
        background: $togglenav_bg;
        height: 55px;
        padding: 15px;
        box-sizing: border-box;

        .toggle{
            &:hover {
                color: $togglenav_hover_color;
            }

            color: $togglenav_color;
            padding: 7px 15px;
            transition: .3s all ease;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            display: inline-block;

            @media screen and (max-width: 240px) {
                font-size: 80%;
            }

        }

        .toggle-sidebar {
            right: 5px;
        }

        .toggle-main {
            left: 5px;
        }
    }
}