O'Reilly logo

Mastering Sass by Luke Watts

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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; ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required