Menu fallback “menu_class” rendering a “div” instead of a “ul”

1 Views

I’m working on a fallback menu for a WordPress theme I’m working on. The main menu’s menu_class renders a ul which is what I want.

However, if I use the menu fallback, the menu_class renders a div instead. Is there a way to make WordPress render a ul for the fallback menu instead of a div?

Read More

Here’s my code: 

 function clarity_main_nav_fallback() {

     wp_nav_menu(array(

    'show_home' => true,
    'container' => false,                           // remove nav container
    'container_class' => 'menu clearfix',           // class of container (should you choose to use it)
    'menu_class' => 'nav navbar-nav'              // adding custom nav class

    ));

 }
Post Views: 1

Related posts

2 comments

  1. First, I think you’re confusing the wp_nav_menu() args. The 'menu_class' parameter defines the class added to the menu element, which by default is <ul>, as per the 'items_wrap' parameter. The default 'menu_class' is 'menu', which results in <ul class="menu">.

    The real issue is actually the fallback_cb – the callback used when no menu is defined – which defaults to wp_page_menu().

    Now, both wp_nav_menu() and wp_page_menu() output an unordered list (<ul>) wrapped by a container (<div>) by default. In your call to wp_nav_menu(), you have: 'container' => false, which overrides the menu list being wrapped by a container <div>. But that parameter does not get passed to the default wp_page_menu() callback output.

    The easiest solution would be to define your own callback:

    wp_nav_menu( array(
    // Add your normal args here
    'fallback_cb' => 'wpse116656_nav_menu_cb'
) );

    Then declare your callback function:

    function wpse116656_nav_menu_cb() {
    wp_page_menu( array(
        // Args here
    ) );
}

    Now, here’s the caveat:

    • wp_nav_menu() applies the 'menu_class' parameter to the unordered list

      (<div><ul class="$menu_class"></ul></div>)

    • wp_page_menu() applies the 'menu_class' parameter to the wrapper container outside the menu list

      (<div class="$menu_class"><ul></ul></div>)

    So, you’ll need to account for that with your CSS.

  2. You have a problem with menu location

    Go to

    Dashboard >> Appearance >> Menus >> ” Open Your Menu Name “

        => Find at " Display Location " in  " Menu Setting"

    => check " primary menu " [ if you have uncheck]

    enter image description here

Comments are closed.