Wordpress navigation Twitter bootstrap customization

Question

I have been trying to theme my navigation to use the twitter bootstrap. I want it to look like the demo example of a fixed top banner as seen here http://getbootstrap.com/examples/navbar-fixed-top/

I have got it working but I do not like the way I have got it working!

    wp_nav_menu(
        array(
            'container_class' => 'main-nav navbar-collapse collapse',
            'theme_location' => 'primary',
        )
    );

The code above builds my navigation, as you can see besides the default I have added navbar-collapse and collapse so it styles it according to bootstrap. This is not really the issue. The issue is when this piece of code then generates the menu I do not know how to add a class to the UL it creates so below is how I have done it.

    $(document).ready(function(){
        if($("#menu-menu-1").length !== 0){
            $(".menu").addClass("nav navbar-nav");
        } else {
            alert("no navigation system");
        }
    });

This works by detecting the UL when the code has made it because it has an id of #menu-menu-1 then it adds the necessary classes and it all works.

Finally the question! Is there a way to do this more efficiently because this method is very Quick Fix style and doesn't seem like a trustworthy permanent method. the alert was just there for testing purposes so I knew if the script was running

Answer 1

wp_nav_menu() has options for both menu_id and menu_class . To add both to your menu, you would do something like the following:

$menu_args = array(
    'theme_location'  => 'primary',
    'container_class' => 'main-nav navbar-collapse collapse',
    'menu_class'      => 'nav navbar-nav',
    'menu_id'         => 'menu-menu-1'
);

wp_nav_menu( $menu_args );