• I’m using the 82 street theme by webavenue.

    What should happen: Click on menu icon and menu slides out, click on item in menu and submenu items are displayed.

    The problem is that after the menu first opens, clicking on a parent item to display its submenu instead closes the entire menu. When you reopen it the submenu items are visible but this should happen without the menu collapsing after the first click.

    Is there any custom css or javascript that I can add that will fix this?

    Menu style is 3 for the code below.

    functions.php:

    class eightytwostreet_walker_nav_menu extends Walker_Nav_Menu {
    
    	private $logo;
    	private $count_root_items = 0;
    	private $total_root_items = 0;
    	private $menu_style = 1;
    	private $start_menu = false;
    	private $print_logo = false;
    
        function __construct($menu_location, $logo, $menu_style) {
    
        	$this->logo = $logo;
            $this->menu_style = $menu_style;
            
            $menu_name = $this->get_menu_name($menu_location);
            if(!empty($menu_name)) {
            	$menu = wp_get_nav_menu_object($menu_name);	
            	$items = wp_get_nav_menu_items( $menu->term_id );
    
            	$this->total_root_items = $this->get_number_of_root_elements($items);
            }
    
        }
    
        function get_menu_name($location){
    	    if(!has_nav_menu($location)) 
    	    	return false;
    	    
    	    $menus = get_nav_menu_locations();
    	    $menu_title = wp_get_nav_menu_object($menus[$location])->name;
    	    return $menu_title;
    	}
    
    	// ignore sub-menu start
    	function start_lvl( &$output, $depth = 0, $args = array() ) {
    		if($this->menu_style == 3) {
    			$output .= '<ul>';
    		}else {
    			$output .= '<ul class="dropdown-menu">';
    		}
        }
      	
      	// ignore sub-menu end
    	function end_lvl( &$output, $depth = 0, $args = array() ) {
    		$output .= '</ul>';
        }
    
    	function start_el(  &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
    
    	    global $wp_query;
    
    	    if($depth == 0 && $this->menu_style == 2) {
    
    	    	if( ( $this->count_root_items % round ( $this->total_root_items / 2 ) ) == 0 ) {
    	    		$this->start_menu = true;
    	    		$output .= '<ul class="nav navbar-nav">';
    	    	}
    	    }
    
    	    if($depth <= 1 && !empty($item) && is_object($args)) {
    	        /*
    	    	$child_pages = get_children( array('post_parent' => $item->object_id, 'post_type' => 'page', 'post_status' => 'publish'));
                */
    	    	if(!empty($item->classes) && in_array('menu-item-has-children', $item->classes)) {
    	    		$has_children = true;
    	    	}else {
    	    		$has_children = false;
    	    	}
    	    	
    	    	$classes = empty( $item->classes ) ? array() : (array) $item->classes;
    	    	
    	    	if($this->menu_style != 3) {
    	    		$classes[] = ($has_children) ? 'dropdown' : '';	
    	    	}
    	    	/* 
    	    	$classes[] = ( in_array('menu-item-has-children', $item->classes) ) ? 'dropdown-toggle' : '';
                */
    	    	$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args, $depth ) );
    	   	 	$class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';
    	    	
    		    $output .= '<li id="nav-menu-item-'. $item->ID .'" ' . $class_names. '>';
    		  
    		    $attributes = ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : '';
    		    $attributes .= ($has_children) ? ' class="dropdown-toggle"' : '';
    		    $attributes .= ($has_children) ? ' data-toggle="dropdown"' : '';
    		  
    		    $item_output = sprintf( '%1$s<a%2$s>%3$s%4$s%5$s</a>%6$s',
    		        $args->before,
    		        $attributes,
    		        $args->link_before,
    		        apply_filters( 'the_title', $item->title, $item->ID ),
    		        $args->link_after,
    		        $args->after
    		    );
    		  
    		    $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
    
    		    if(!empty($child_pages)) {
    		    	$output .= '<ul class="dropdown-menu">';
    		    	foreach ($child_pages as $key => $page) {
    		    		$output .= '<li><a href="'.get_permalink($page->ID).'">'.$page->post_title.'</a></li>';	
    		    	}
    		    	$output .= '</ul>';
    		    }
    	    }
    
    	}
    
    	function end_el( &$output, $item, $depth = 0, $args = array() ) {
    		if($depth <= 1) {
    			$output .= "</li>";	
    		}
    
    		if($depth == 0 && $this->menu_style == 2) {
    			$this->count_root_items++;
    			
    	    	if( ( $this->count_root_items % round ( $this->total_root_items / 2 ) ) == 0 ) {
    	    		$output .= '</ul>';
    	    		$this->start_menu = false;
    
    	    		if($this->print_logo == false) {
    	    			$output .= $this->logo;
    	    			$this->print_logo = true;
    	    		}
    	    	}
    
    	    	if( $this->start_menu && $this->count_root_items == $this->total_root_items) {
    	    		$output .= '</ul>';
    	    	}
    
    	    }
        }
    
    }

    main.js:

    // Dropdown Menu
    		$(".dropdown").hover(function() {
    				$('.dropdown-menu', this).stop( true, true ).fadeIn("fast");
    				$(this).toggleClass('open');						  
    			},
    			function() {
    				$('.dropdown-menu', this).stop( true, true ).fadeOut("fast");
    				$(this).toggleClass('open');                         
    	    });
    	    
    	    $(".navbar-nav > li a").click(function(){
    	    	$(this).closest('ul').find('li.active').removeClass('active').find('ul').hide();
    	    });
    		
    		// Hide Navigation
    		$(".navbar-nav li:not('.dropdown') a").click(function() {
    			$(".navbar-collapse").collapse('hide');
    		});
    
    		// For Mobile Menu fix
    		$(".navbar-toggle").click(function(){
    			_this = this;
    			if($(window).width() <= 1340 && $(window).scrollTop() == 0) {
    				if($(_this).hasClass('collapsed')) {
    					$('body').addClass('scrolling');	
    				}else {
    					$('body').removeClass('scrolling');
    				}	
    					
    			}
    			
    		});
    
    		// Dropdown
    		$('.navbar-nav > li:has(ul) > a').click(function(e){
    			e.preventDefault();
    			$(this).next('ul').slideToggle();
    			$(this).parent('li').toggleClass('active');
    		});
    		

    The page I need help with: [log in to see the link]

Viewing 7 replies - 16 through 22 (of 22 total)
  • Thread Starter kanna18

    (@kanna18)

    Yes, unfortunately it still doesn’t work with those settings. Is there any other code from the theme that might be helpful? All I know is we are using the css for menu option 3 which is all in a separate file. Also besides the main.js and functions.php code I found the following that seems to be related to the menu option 3 in header.php (not sure if this is useful or not):

    <nav class="navbar navbar-default navbar-fixed-top <?php echo $sticky_style;?>">
      <div class="content-wrapper">
        <div class="row">
          <div class="col-md-12">
            
            <div class="navbar-header">
              <?php if($menu_style == 3) : ?>
              	<button type="button" class="navbar-toggle"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar one"></span> <span class="icon-bar two"></span> <span class="icon-bar three"></span> </button>
              
    	      <?php else: ?>
    	      	<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
    	      <?php endif; ?>
    
    	      <?php echo $header_logo; ?>
            </div>
            <!-- /.navbar-header -->
            <div id="navbar" class="navbar-collapse collapse">
            	<?php if($menu_style == 3) : ?>
              		<button type="button" class="navbar-toggle"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar one"></span> <span class="icon-bar two"></span> <span class="icon-bar three"></span> </button>
              	<?php endif; ?>
              <?php 
                  
                  wp_nav_menu( array(
                    'theme_location' => 'header',
                    'container' => '',
                    'menu_class' => $menu_class,
                    'walker' => new eightytwostreet_walker_nav_menu('header', $header_logo, $menu_style)
                  ));
    
              ?>
    
              <?php if($menu_style == 3) : ?>
              		<?php social_links('social-icons'); ?>
    	       <?php endif; ?>
            </div>
            <!--/.nav-collapse --> 
          </div>
          <!-- /.col --> 
        </div>
        <!-- /.row --> 
      </div>
    </nav>
    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    I don’t think there’s anything else useful other than what is already visible in the source code.

    I know why it’s not working. It’s because the class that it’s looking for here doesn’t exist at the time:

    
    if (parent.hasClass(menuDropdownExpandedClass)) {
    
    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Try this instead:

    
    /******* Do not edit this file *******
    Simple Custom CSS and JS - by Silkypress.com
    Saved: Oct 04 2017 | 22:53:40 */
    jQuery(document).ready(function( $ ){
    
    	var body = $('body'),
    		menuDropdowns = $('[data-toggle="dropdown"]', body),
    		toggleClass = 'nav-expanded',
    		menuDropdownExpandedClass = 'active';
    
    	if (menuDropdowns.length !== 0) {
    		menuDropdowns.on('click', function(event) {
    			event.preventDefault();
    
    			// Open the menu
    			body.addClass(toggleClass);
    
    			var dropdown = $(this),
    				parent = dropdown.parent(),
    				child = $('ul', dropdown);
    
    			if (child.is(':hidden')) {
    				parent.removeClass(menuDropdownExpandedClass);
    				child.hide();                
    			}
    			else {
    				parent.addClass(menuDropdownExpandedClass);
    				child.show();
    			}
    		});
    	}
    });
    
    

    There will be back and forth between us trying things out to resolve this particular problem.

    Edit sorry copy and paste fail

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    @kanna18, Does that work instead? Sorry about the formatting.

    Thread Starter kanna18

    (@kanna18)

    No… unfortunately that still doesn’t work. This menu just does not want to stay open!

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Yea looks like it’s best to talk to the people who built that menu for support.

    Thread Starter kanna18

    (@kanna18)

    Yes, the owner of the site is just going to get rid of the submenus for now. Thanks for all your help though, really appreciated!

Viewing 7 replies - 16 through 22 (of 22 total)
  • The topic ‘Prevent slideout from closing when clicking parent menu item?’ is closed to new replies.