Mastering Sass

Main nav

Our main-nav is much like our top-nav. It needs some padding to space everything out. It also needs to stack on mobile and then go inline on small screens and up.

Create a file scss/components called _main-nav.scss and inside place the following:

.main-nav { 
    &-menu-item { 
        padding: $spacing / 2; 
        display: block; 
 
        @include bp(small) { 
            display: inline-block; 
        } 
    } 
} 

Then import it just after the main-header import in scss/style.scss:

@import '../../bower_components/susy/sass/susy'; 
@import "helpers/all"; 
@import "base/normailize"; 
@import "base/global"; 
@import "base/typography"; 
@import "layout/grid"; 
@import "components/top-nav"; 
@import "components/main-header"; @import "components/main-nav"; @import "components/search"; @import "components/cart"; ...