//main navigation @include media(769px) { .main-navigation { //first ul { display: none; list-style: none; @include margin(0); @include padding(0 $base__spacing); li { *float: left; display: inline-block; position: relative; a { display: block; @include margin(0); @include padding($base__spacing $small__spacing); } } li:hover > a, li.focus > a { } //second level ul { @include padding(0); -moz-box-shadow: 0px 3px 2px $color__gray; -webkit-box-shadow: 0px 3px 2px $color__gray; box-shadow: 0px 3px 2px r$color__gray; &:after { content: none; } li { border:none; a { width: 200px; @include padding($small__spacing); } } //children } } .current_page_item > a, .current-menu-item > a, .current_page_ancestor > a, .current-menu-ancestor > a { } } .menu-toggle { display: none; } .main-navigation ul { display: block; } } @include media(max-width 768px) { .main-navigation { clear: both; width: 100%; @include margin(0); @include padding(0 $base__spacing); //first ul { text-align: left; display: none; list-style: none; @include margin(0 0 $base__spacing 0); @include padding(0); border-right: 1px solid $color__gray; border-left: 1px solid $color__gray; border-bottom: 1px solid $color__gray; li { @include margin(0); @include padding(0); a { display: block; @include margin(0); @include padding($small__spacing); border-top: 1px solid $color__gray; } } //second level ul { @include margin(0); @include padding(0); border: none; li { @include margin(0); @include padding(0); a { width: 100%; } } } //children .menu-item-has-children > a:after { font-family: 'simple-line-icons'; content: "\e604"; position: relative; float: right; @include opacity(.5); } } } /* Small menu. */ .menu-toggle, .main-navigation.toggled ul { display: block; } .main-navigation ul { display: none; } .menu-toggle { @include border-radius(3); font-size: 1em; @include margin(0); @include padding($small__spacing); &:hover { } } }