Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I am trying to create something that looks roughly like this:

<nav class="site-navigation" role="navigation">
    <ul>
        <li><a href="#" class="c1"><span class="icon-paw"></span>Home</a></li>
        <li><a href="#" class="c2"><span class="icon-quill"></span></span>About</a></li>
        <li><a href="#" class="c3"><span class="icon-wool2"></span>Blog</a></li>
    </ul>
    <button id="menu" class="menu-button" type="button" role="button" aria-label="Menu Toggle">
      <span class="icon-menu"></span>
    </button>
</nav>

Given that I am placing the button inside the navigation for mobile is controversial, however at the moment it's the least of my worries. I can't work out how to get custom classes on to my nav items. I'm using Bones as a starting point for my project and I've got most things figured out, but this one, after much googling is still to be resolved.

The current function that does my nav is:

function bones_main_nav() {
    // display the wp3 menu if available
    wp_nav_menu(array(
        'container' => false,                           // remove nav container
        'container_class' => 'menu clearfix',           // class of container (should you choose to use it)
        'menu' => __( 'The Main Menu', 'bonestheme' ),  // nav name
        'menu_class' => 'nav top-nav clearfix',         // adding custom nav class
        'theme_location' => 'main-nav',                 // where it's located in the theme
        'before' => '',                                 // before the menu
        'after' => '',                                  // after the menu
        'link_before' => '',                            // before each link
        'link_after' => '',                             // after each link
        'depth' => 0,                                   // limit the depth of the nav
        'fallback_cb' => 'bones_main_nav_fallback'      // fallback function
    ));
} /* end bones main nav */

Any help with this would be VERY much appreciated.

Because it's such a custom navigation that very specific, would I be better to just make a static nav?

share|improve this question

migrated from stackoverflow.com Jan 12 at 2:51

This question came from our site for professional and enthusiast programmers.

    
you need to use a custom walker. I'd suggest you ask on the wordpress stackexchange site. Or simply google it. There's plenty of information, like here for instance: illuminatikarate.com/blog/… –  Patrik Alienus Jan 10 at 20:58
    
Thanks I'll look into this! –  Mat-visual Jan 10 at 21:03
    
You should also read up on wp_nav_menu(): codex.wordpress.org/Function_Reference/wp_nav_menu –  Patrik Alienus Jan 10 at 21:04
    
I don't understand do you want to add a custom class to your nav items or add a button? –  Howdy_McGee Jan 12 at 4:51
    
Looks like a near duplicate of this: wordpress.stackexchange.com/a/130359/21376 But is looks like you are adding more than just classes. There is a <span> in that code. –  s_ha_dum Feb 2 at 14:42

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.