Add custom class to navigation

[lucaslem]

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.

[ramseyp]

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

[lucaslem]

Thanks so much!

[Author]

Posts