@mixin menuBarIcon {
	
	display: block;
	height: 4em;
    width: 4em;
    padding: 0.6em;													/* move button from corner */ 
	
	content: "MENU";
	font-size: 14px;
    font-weight: bold;
    line-height: 0.5;
    text-align: center;
	
    background-color: $baseColorLighter;
	background-image: url(menu_icon.svg);
    background-size: 34px;
    background-repeat: no-repeat;
    background-position: center center;
	box-shadow: 0 8px 6px -6px $baseColorLight;	

}

@mixin hideContent {
	height: 0;
	min-height: 0;
	margin-top: -70px; 													// makes it work on iOS
	text-indent: -9999px;
}

@mixin showContent {
	height: 100%;	
	max-height: 9999px;
	margin-top: 0;
	text-indent: 0;
}

body.navbar {
	
    nav {
        ul {
            list-style-type:none;

            li {
                float: left;

                a {														/* unselected top-level menu items */
                    display: block;										/* Style Stuff */
                    padding: 0.5em 1.25em;								/* spacing of buttons */

					&:hover {
                        color: white;
                        background-color: $baseColorDark;
                    } /* /a:hover */
                    
                } /* /a */			
            } /*  /li */	
        } /* /ul */
    } /* /nav */

    /* $end */


    header nav {	
        ul {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 99;
			
            li {	
				@include hideContent;
				width: 100%;
				clear: both;
            } /* /li*/
			
            /*show the nav bar*/
            &:hover li {
				background-color: $baseColorLighter;  /* default color / style of nav */
				@include showContent;	
            } /* /ul:hover */

            &:before {
                @include menuBarIcon;
            } /* /ul:before */
			
        } /* /ul */		
    } /* /nav */
	
	
	
	
	
} /* /Body NavBar */