In this tutorial, I will show you how to add a button to the Primary Navigation of the Genesis Sample Theme by StudioPress.
A user in the Restored 316 Facebook group wanted to know how to add a donate button next to the primary navigation on their site. Their theme didn’t offer a navigation widget, so they weren’t sure how to accomplish this. I recommended adding a menu item, styling it with some CSS to create a button. Problem solved.
To get started, we’ll add some coding into our CSS to create a button. We’ll make our button green. Add the following CSS to your stylesheet, or navigate to Dashboard > Customize > Additional CSS and drop it in there.
Next, navigate to the menu you are using for your primary navigation,
- Add a Custom Link menu item with the URL of the link where you want your visitors to donate.
- Add the label
- Then, add the CSS class of button-green.
- If you’re not seeing the CSS class field, click on screen options at the top of your menu page
- Check the CSS box.
Your button doesn’t need to be green, of course – I used green to match the rest of the site. Just update the “Additional CSS” with different colors, and name your button something else. Just make sure that whatever you add to the CSS field in your menu matches the CSS name you gave in your Additional CSS.