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

Looking for a Digital Marketing Agency in Jacksonville?

By Dave Fogel | January 23, 2023

If you are not sure what a Digital Marketing Agency does, we have put together some of the most common questions or topics related to digital marketing. As a Full-Service Digital Marketing Agency, NetViper specializes in providing digital marketing services to small to medium sized businesses using the internet and other digital marketing channels such…

Let’s Talk Digital Marketing vs Traditional Marketing In Jacksonville

By Dave Fogel | December 31, 2022

Are you thinking about running Digital Marketing in Jacksonville? Not sure how it compares to traditional marketing? We will try and give you the answers you are looking for.  Keep in mind we are a Digital Marketing Agency, so we might be a little biased. Traditional marketing agencies typically focus on marketing strategies and tactics…

Why Use A Digital Marketing Agency for Small Business in Jacksonville Florida

By Dave Fogel | December 31, 2022

Let’s talk about a Digital Marketing Agency for Small Business.   Why small business? Because we can help you the most in succeeding online. While are many reasons to use a local Digital Marketing agency that focuses on small businesses, let’s start with five good ones to get you started: Local Experts: Digital marketing agencies have…

Posted in

Dave Fogel

Leave a Comment