Adding An Animated Icon To Genesis Responsive Menu

In this tutorial, we are going to be adding an animated icon and a responsive menu to the genesis starter theme from combining two different sources.

For the responsive menu, we are going to be using the Genesis Responsive Menu 2.0 created by Ozzy Rodriguez.  The full tutorial is located here. You can download the sources files from Ozzy.

The animation is based on code from callmenick found here. We will not be downloading any files from there, just copy and paste. We will not be using the SASS files, just plain CSS.

The first thing we are going to do is get the responsive menu working. It is pretty straight forward and the tutorial should walk you through it. You are going to want to customize the colors of the menu, but don’t worry about the icons because we will be replacing them.

Now for the animation. First copy the common files:

https://gist.github.com/netviperinc/ba6777cdcaa03f89d20c

Paste them into your style.css file. I put them just above the media queries.

In this tutorial, we are going to be using the second option for the menu which changes it to the hamburger to the X, so we also need to paste in this code to our style.css file.

https://gist.github.com/netviperinc/28ace2fe3758abb10f32

Next we need to edit the responsive-menu.js file from Ozzy’s Menu.

We need to replace “menu-toggle” with “c-hamburger c-hamburger–htx” on line 4 and “menu toggle” with “.c-hamburger” on line 8. We also need to add toggle menu between the button on line 4. Finally, on line 14 change “activated” to “is-active” to reflect the css classes in the new menu.

The finished changes should look like this.

https://gist.github.com/netviperinc/eb9abe627e548ce2d2f3

Next we have to edit the CSS from Ozzy’s Responsive Menu. We have to change the .menu-toggle class to .c-hamburger so the menu will hide in desktops. We also have to change line 66 from .sub-menu-toggle.active:before to .sub-menu-toggle.is-active:before to reflect the change we made in the js file for the active state.

https://gist.github.com/netviperinc/10be8f0581fcf57314e5

That should do it. You will now have a fully animated CSS button.

Unless you want a bright pinkish red button on your site, you are probably going to want to style the icon. It can be a little tricky with CSS.

For the site I am working on, I want to color of the lines from white to black, so we want to make these changes:

.c-hamburger span::before, .c-hamburger span::after {
position: absolute;
display: block;
left: 0px;
width: 100%;
height: 8px;
content: “”;
background-color: rgb(0, 0, 0);
}

.c-hamburger span {
display: block;
position: absolute;
top: 44px;
left: 18px;
right: 18px;
height: 8px;
background: #000 none repeat scroll 0% 0%;
}

Next I am going to change the background color from red.

.c-hamburger–htx {
background-color: transparent;
}

Genesis built in classes will cause a background color to show up on hover, so we need to add a new class to remove that.

.c-hamburger:hover,
button.c-hamburger–htx:hover {
background: none;
}

I want to remove some of the extra padding at the top of the menu, so I changed this from 40 to 20.

.c-hamburger span {
top: 20px;
}