• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

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

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › How to add custom CSS classes and HTML to a Genesis child theme?

This topic is: not resolved

Tagged: css, custom css, hamburger, menu, navigation menu

  • This topic has 2 replies, 2 voices, and was last updated 2 years, 5 months ago by SavvyPro.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • October 18, 2020 at 6:42 pm #501509
    SavvyPro
    Participant

    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.

    October 18, 2020 at 7:02 pm #501510
    Anita
    Keymaster

    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!

    October 19, 2020 at 7:19 am #501515
    SavvyPro
    Participant

    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
Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble