Specifying Class style for Menu

Looking at your rendered output:

<div class="menu sf-menu"><ul><li class="page_item page-item-2 current_page_item">...

It appears that 'sf-menu' got appended as a class to the menu container, rather than to the menu itself.

The wp_nav_menu() function has two separate parameters:

  • menu_class: CSS class applied to the menu list <ul> menu tag
  • container_class: CSS class applied to the element tag that contains the menu (defaults to <div>)

So, if you use:

wp_nav_menu( array(
    'theme_location' => 'primary',
    'container_class' => 'menu-container-class',
    'menu_class' => 'menu-ul-class'
) );

The rendered output should look like:

<div class="menu menu-container-class"><ul class="menu-ul-class"><li class="page_item page-item-2 current_page_item">...

So, it appears that you’ve used container_class instead of menu_class in your wp_nav_menu() call.

Edit

Replace this:

<div class="menudiv">
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menudiv' => 'menu sf-menu' ) ); ?> 
</div>

…with this:

<?php
wp_nav_menu( array(
    'theme_location' => 'primary',
    'container_class' => 'menudiv',
    'menu_class' => 'sf-menu'
) );
?>

Edit 2

Okay, I think I see what’s happening: you don’t have a custom menu assigned to the 'primary' Template Location, which means that the default fallback menu (wp_page_menu()) is being output. When that happens, 'menu_class' gets assigned to a <div> that contains the wp_page_menu() output, instead of to the <ul>.

You can tell that the default menu callback is being output, because of the CSS classes generated in your menu:

li class="page_item page-item-2 current_page_item"

If this were an actual, custom menu in this location, those classes would include 'menu-item', instead of 'page_item'. For reference, compare the CSS classes output by wp_nav_menu() with the CSS classes output by wp_page_menu().

Based on our chat conversation, the problem is that you’re registering a Theme Location main in register_nav_menus(), but attempting to call a Theme Location primary in wp_nav_menu(). Easy fix, change 'theme_location' => 'primary' to 'theme_location' => 'main' in wp_nav_menu():

<?php
wp_nav_menu( array(
    'theme_location' => 'main',
    'container_class' => 'menudiv',
    'menu_class' => 'sf-menu'
) );
?>