Add custom class to navigation

Community Forums Forums Design Tips and Tricks Add custom class to navigation

This topic is: resolved

This topic contains 2 replies, has 2 voices, and was last updated by  lucaslem 1 year, 3 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #62682

    lucaslem
    Participant
    Post count: 88

    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.

    #62742

    ramseyp
    Participant
    Post count: 99

    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.


    #62807

    lucaslem
    Participant
    Post count: 88

    Thanks so much!

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.