I love writing Genesis tutorials that are in response to questions I’ve been asked a number of times. One of those questions is “how do I display a call to action button like the Get Free Content item in your menu?”
I’m going to show you how you can style a Genesis menu item so that it looks like a call-to-action button. I’ll be using the Download Theme link that’s found in the Mobile First theme as an example. Here’s a screenshot of that:
Assign a CSS Class
When you create a custom menu, you have the option to add a CSS class to the link. This gives you the chance to style that link specifically with CSS.
Make sure that you have the CSS Classes option enabled in the Screen Options tab that can be found in the upper right hand corner of the screen.
In my example, I applied a highlight class to my Download Theme link. Here’s a screenshot that shows exactly what that would look like:
Styling the Button
Now that you’ve given your menu item a custom class, you need to style it. Below is the CSS that I used to display a call-to-action button in the Mobile First theme.
It’s worth noting that the CSS you see above might need to be tweaked a bit depending on the usage and how your theme is currently styled. At the very least, this should give you a place to start, however.
I hope that you enjoyed this Genesis tutorial. I have also published a list of Genesis code snippets, so feel free to use anything you see there.