Mastering Sass

Top nav

So, the first thing we need to do is hide the container inside the top-nav on small to medium screens. Then we'll add a button just before the container which will open and close the container using jQuery's slideDown and slideUp built in animations.

First let's add the button just inside the top-nav markup in index.html:

<nav class="top-nav"> 
    <a href="javascript:;" class="top-nav-menu-button" id="top-nav-menu-button">
        <span class="ion-navicon">
</span>

        <span class="screen-reader-text">

            Top Nav Button

        </span>

    </a> 
    <div class="container"> 
        ... 
    </div> 
</nav> 
<!-- END .top-nav --> 

Here, we've added a link with a class and id of top-nav-menu-button. The class is for styling and the id is for jQuery. I prefer to set the href to "javascript:;" ...