• katniss93

    (@katniss93)


    I am currently using material design bootstrap for styling components of my site and the side-nav layout I’m using looks like this:

    <ul id="slide-out" class="side-nav fixed personal-side-nav dark-side-nav">
        <div class="logo-wrapper">...</div><!--/logo-wrapper-->
    
        <ul class="collapsible collapsible-accordion">
          <li><a class="collapsible-header waves-effect waves-light">Home</a></li>
         <div class="collapsible-body">
                        <ul><!--in wordpress this becomes .sub-menu but I figured out how to change the class-->
                            <li><a href="#" class="waves-effect waves-light">Sample Page</a>
                            </li>
    
                        </ul>
                    </div><!--/collapsible-body-->
        </ul><!--/collapsible collapsible-accordion-->
    </ul><!--/slide-out-->

    And this is what I have in my header.php for the nav:

    <?php
    wp_nav_menu( array(
    
    	'theme_location'	=> 'primary',
    	'container'		=> 'ul',
    	'container_class'	=> 'side-nav',
    	'menu_class'		=> 'collapsible collapsible-accordion'
    
    	) );						
    
    ?>

    And this is how the code within ul.collapsible looks when it’s on localhost:

    <ul id="menu-menu-1" class="collapsible collapsible-accordion"><li id="menu-item-10" class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-menu-ancestor current-menu-parent current-page-parent current_page_parent current_page_ancestor menu-item-has-children menu-item-10"><a href="#">Home</a><!---I removed the link href for this forum post-->
    <ul class="sub-menu">
    	<li id="menu-item-6" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item menu-item-6"><a href="#">Sample Page</a></li><!---I removed the link href for this forum post-->
    </ul>
    </li>
    </ul>

    Here is what displays when I create a page and set it as a sub-menu item customizing the menu in wordpress:

    Home
    Sample Page
    (the sample page is supposed to collapse an not be visible until Home page is clicked )

    I’m not sure what’s causing the problem or how to fix it.

    Using XAMPP for localhost.
    I am using underscores.me for making a custom theme template.
    I currently don’t have a site up and running right now to show the problem.

  • The topic ‘sub-menu menu not collapsing’ is closed to new replies.