Responsive SASS Navigation

Posted on by

I recently wrote a post on not over complicating responsive navigation. That got me thinking, I should take this a step further and make my own responsive navigation with drop downs, so that’s exactly what I did and spent some time developing my own navigation using SASS to share. This is really my first bit of code I’m putting out to the public, so I thought it would be a good experience to write a post about it and how to use it.


Responsive SASS Navigation

About the Nav

I’m a big fan of using SASS on my projects, and I thought to myself, there has to be a way to develop a navigation using all of these really cool tools that SASS has to offer to make is super easy for someone to customize and edit. By using features such as lighten and darken, I was able to create only a few variables and apply them throughout the navigation. Using these few variables, you can edit the navigation’s color scheme and spacing/padding to your liking, which I think is pretty awesome (hopefully others do too).

My goal was to really make it as easy on the user as possible to implement this navigation and customize it to fit the site they are developing. Another thing that is pretty unique to this navigation is how little jQuery is used to make it function. I’ve looked at plenty of responsive navigations and thought to myself…..why? Why is there so much code? I wanted this navigation to be easily understood by anyone who downloads and uses it. There have been so many others out there that have helped me when I was first learning by producing plugins, and I also just wanted to opportunity to return the favor to others in a similar position currently.  Now… the good stuff.

How to Use

**I’m just going to include screenshots from the plugins site here, so if you want a to access the real code, feel free to visit the plugin site.

First, you’ll need to download the code from the plugin’s site which you can find at the top or bottom of the post.

The first step is pretty simple. Link the jQuery to your page, and add in the navigation CSS to your file either by copy/pasting it, or using the _nav.scss file as an import.


The Markup


Customize the Navigation

I’ll be honest, this is my favorite part. I tried to make it as easy to customize as possible by utilizing a combination of variables, darken, lighten, and a lil math. Here are the variables that you can edit to customize the navigation…


For the navigation, I wanted there to be a slight gradient (kinda stylish), but make it super easy to edit so I used the variable $menu-background to assign to one color of the gradient, and then used a slight darken for the other end of the gradient. I also took that same variable and applied it to the drop down background with a little lighten to differentiate from the main navigation and BOOM, you have one variable that can edit the entire skin of the navigation.

I also wanted the user to be able to control the padding of the links in the navigation easily as well, and that’s where the math came in. I created a variable for the vertical and horizontal navigation and applied them to the primary links of the navigation. Then, used math to apply half of that padding to the sub-nav items.

Overall, I’m pretty pleased with the results of what my goals were for developing this navigation.

Download Responsive Navigation

Leave a Reply