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.

Im integrating Superfish into WP. I have called the CSS and the JS. However when I place a class style in the wp_menu as below, the menu is disappearing (see here for rendered output). Could anyone assist (this has been followed from a not so helpful tutorial)

Current code being generated is:

<div class="menudiv">
<div class="sf-menu"><ul><li class="page_item page-item-2 current_page_item"><a href="http://rusticblonde.hostizzo.com/">Home</a></li>
<li class="page_item page-item-101">    <a href="http://rusticblonde.hostizzo.com/?page_id=101">test 1</a></li>
<li class="page_item page-item-105"><a href="http://rusticblonde.hostizzo.com/?page_id=105">test 2</a></li>
<li class="page_item page-item-103"><a href="http://rusticblonde.hostizzo.com/?page_id=103">test 3</a></li>
<li class="page_item page-item-98"><a href="http://rusticblonde.hostizzo.com/?page_id=98">Test Page</a></li></ul></div>
</div>

Inside my header is the below:-

<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'container_class' => 'menudiv',
'menu_class' => 'sf-menu'
) );
?>
share|improve this question
    
What do you mean by "disappearing"? Is the menu markup being generated in the rendered output, and being hidden via CSS, or is the menu markup itself not getting rendered? –  Chip Bennett Nov 20 '12 at 15:07
    
Hi Chip, the menu itself is not getting rendered.. please see the site rusticblonde.hostizzo.com... its as if the menu disappears when i placed the menu_class in there. –  Kirsty Harris Nov 20 '12 at 15:10
    
View browser source. The menu markup is being rendered. –  Chip Bennett Nov 20 '12 at 15:12
    
Close-voted as off-topic. WordPress is outputting the menu markup, with specified CSS class. This is thus a CSS/Superfish question, not a WordPress question. –  Chip Bennett Nov 20 '12 at 15:13
    
Hi Chip, i assumed that... but why isnt it displaying thou? It should do surely :S –  Kirsty Harris Nov 20 '12 at 15:13
show 2 more comments

2 Answers

up vote 0 down vote accepted

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'
) );
?>
share|improve this answer
    
So for example if i have a class named menudiv... i would that in the container class? –  Kirsty Harris Nov 20 '12 at 15:29
    
To what HTML element do you want to apply that CSS class? If you want to apply menudiv class to the <div> tag that contains the menu, then yes. –  Chip Bennett Nov 20 '12 at 15:32
    
Ok Chip... please see amends... it now displays the menu again... but not the styles !!! ARGH! –  Kirsty Harris Nov 20 '12 at 15:33
    
Basically the class of the menu is .sf menu (which is the superfish default style) and i want it in the DIV menudiv... so i amended as above and it brought the menu back... just no style to it :S –  Kirsty Harris Nov 20 '12 at 15:35
1  
let us continue this discussion in chat –  Chip Bennett Nov 20 '12 at 16:00
show 16 more comments

Remove the trailing comma. I am pretty sure I have seen that produce an error in some cases. Besides, its just neater.

When you insert the menu_class you overwrite the default. I am pretty sure you are just seeing a consequence of that. Add both 'sf-menu' and 'menu`, or whatever classes your theme requires.

<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'menu sf-menu' ) ); ?> 
share|improve this answer
    
ah! thankyou :) –  Kirsty Harris Nov 20 '12 at 15:02
    
HI s_ha_dum... this still isnt working... its still not displaying the menu :S –  Kirsty Harris Nov 20 '12 at 15:03
    
Hi S_ha_dum, please can you elaborate on the above please? If you view my code rusticblonde.hostizzo.com... its just not displaying it... although the js and the css are loaded :S –  Kirsty Harris Nov 20 '12 at 15:14
    
You menu is there. I can see it in the source. It just isn't styled. I mean, your stylesheet it all but empty. It has one rule-- body { background-color: #000000; color: #ffffff; } This is really a CSS question, not a WordPress one. –  s_ha_dum Nov 20 '12 at 15:24
    
yh but if i call the superfish menu.css... then surely it should be calling the style? –  Kirsty Harris Nov 20 '12 at 15:25
show 1 more comment

Your Answer

 
discard

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.