Slideout menu collapsing before showing submenu items

I’m using a theme (82 street), what’s currently happening: You click on the menu icon, the menu slides out and you see some menu items listed. You click one of the menu items and the whole slideout menu closes. If you reopen it, then the submenu items for the item you previously selected are displayed below it (as they should be).

The problem is that the menu should not close immediately because the first menu items are parent items. Clicking a parent item should show the subitems below it & then clicking a subitem should actually take you to the appropriate page.

I built the menu by dragging and dropping in the Menu’s sections. The parent items are custom links that go nowhere (# URL)

I’ve included the code from functions.php & the navbar css is it helps:

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>';
	    	}

	    }
    }
}

.navbar {
	background: rgba(10, 10, 10, 0);
	border: none;
	margin: 0;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}
.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:focus,
.navbar-default .navbar-nav>.open>a:hover{
	color: #ffffff;
	background: none;
}
.scrolling .navbar {
	background: rgba(35, 31, 31, 1);
	height: 80px;
}

.navbar-default .navbar-brand {
	margin: 0;
	height: auto;
	padding-left: 0;
	padding-right: 0;
	color: #ffffff;
	font-size: 42px;
	padding: 0;
}
.navbar-default .navbar-brand:focus,
.navbar-default .navbar-brand:hover {
	color: #ffffff;
}

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