Mastering Sass

Main nav

Now, we can do almost the exact same thing for the main-nav. Add the markup to index.html:

<!-- BEGIN .main-nav --> 
<nav class="main-nav"> 
    <a href="javascript:;" class="main-nav-menu-button" id="main-nav-menu-button"> 
        <span class="ion-navicon-round"></span> 
        <span class="screen-reader-text"> 
            Main Menu Button 
        </span> 
    </a> 
    <ul class="main-nav-menu container"> 
        ... 
    </ul> 
</nav> 
<!-- END .main-nav --> 

Note that I've changed the class and id to main-nav-menu-button. I've also changed the icon to "ion-navicon-round" to add some distinction between the two.

Once that is done, we can add the necessary styles to scss/components/_man-nav.scss:

.main-nav { &-menu-button { padding: $spacing / 2; @include bp(small) { display: none; } ~ * { display: none; ...