How to add custom CSS classes and HTML to a Genesis child theme?

[SavvyPro]

I am quite new to customizing Genesis child themes and wanted to know how I can add custom CSS classes to it?

For instance, I want to create a hamburger menu even for display on a desktop, not just mobile devices, but not sure how to go about doing that without creating custom CSS first.

I know about modifying the style.css, but how do I modify the Genesis navigation menu so it displays a hamburger for all devices instead of the traditional horizontal menu on desktops?

Thanks for your help.

[Anita]

Looks like you have two separate questions. To add custom CSS you can use the Additional CSS box in the Customizer. That code will overrule a similar setting that's in the stylesheet or plugin.

If you want a hamburger menu to display all the time, you would change the media query that triggers the menu on mobile devices.

But if you're trying to keep the mobile menu on desktop, you may see that the menu may need to have additional CSS added to it to work properly.

What theme are you working with?

---

Love coffee, chocolate and my Bella!

[SavvyPro]

Thanks for your response, Anita.

Oh yeah, I also use the CSS editor in the Customizer as well for testing, it’s awesome! I usually relocate the code to the style.css once I’m happy with the outcome in the CSS editor though, just my preference.

This was more of a general question for all themes, but the two I’m working on at the moment are here:

Essence Pro by StudioPress (https://my.studiopress.com/themes/essence/)

Aspire Pro by AppFinite (https://my.studiopress.com/themes/aspire/)

I’ve seen some pretty cool hamburger menu effects and wanted to know more about how to go that route. For instance, I’ve seen hamburger menus that transition from the standard three stacked horizontal lines to a cross and then back.

I was wondering how I could create such an effect using a Genesis child theme?

Thanks again.

[Author]

Posts