• 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

Add custom class to navigation

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 › Add custom class to navigation

This topic is: resolved

Tagged: jquery, menus, navigation, scripts

  • This topic has 2 replies, 2 voices, and was last updated 9 years, 6 months ago by lucaslem.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • September 15, 2013 at 2:26 pm #62682
    lucaslem
    Member

    Hi, can anyone point me in the right direction in order to add a custom class (ex: .mobile) to one of my menus? Been searching through snippets and resources, but not finding anything obvious. Thanks.

    September 15, 2013 at 6:37 pm #62742
    ramseyp
    Member

    If you're just adding a class to a menu, some javascript code, using jQuery might be easiest.

    In your theme's functions.php, enqueue jquery:`function my_load_scripts() {
    if ( !is_admin() ) {
    wp_enqueue_script('jquery')
    }
    }
    add_action('genesis_meta','my_load_scripts');`

    With jQuery enqueued, you can use a little bit of javascript to add the class to the proper menu. We need to be able to identify the menu, first. On a page with the menu loaded, you need to look at some of the source code. In Chrome, you can right-click on the menu, and Inspect the Element. Firefox and Safari have similar capabilities. You're looking for an Unordered List tag, or <ul> with an ID and some classes that hint at it being a menu.

    As an example, the menu for this page has, on its UL tag, an ID of "menu-forum-navigation" and a class of "menu". We can use the ID as a way for jQuery to add the new class.

    In your WordPress Dashboard, go to Genesis Theme Settings. You can then add this code to one of the Header and Footer Scripts boxes:`<script type="text/javascript">
    jQuery(document).ready(function($) {
    $('#the_menu_ID').addClass('my_new_class');
    });</script>`

    Replace "the_menu_ID" with your menu's unique ID. Replace "my_new_class" with the class you want to add.

    That should do it.


    Community • Work • Conversations

    September 16, 2013 at 7:06 am #62807
    lucaslem
    Member

    Thanks so much!

  • 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