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

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

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