Horizontal Flyouts Not Showing Child Items
-
I have a custom theme (but not a child theme), based off of Reverie:
https://themefortress.com/reverie/
Sadly, somehow my horizontal navigation menu has gone screwy. The parent item in a menu will show the downward arrow next to it. However, upon hovering over that parent menu item, the child menu item(s) never show up. When I reverted my test blog’s theme back to Reverie, I checked the horizontal menu again and everything worked fine.
For reference, here is some code from my functions.php file for the walker. kyb is the prefix Im using instead of reviere_.
class kyb_walker extends Walker_Nav_Menu { function display_element($element, &$children_elements, $max_depth, $depth=0, $args, &$output) { $element->has_children = !empty($children_elements[$element->ID]); $element->classes[] = ($element->current || $element->current_item_ancestor) ? 'active' : ''; $element->classes[] = ($element->has_children) ? 'has-flyout' : ''; parent::display_element($element, $children_elements, $max_depth, $depth, $args, $output); } function start_el(&$output, $item, $depth, $args) { $item_html = ''; parent::start_el($item_html, $item, $depth, $args); $classes = empty($item->classes) ? array() : (array) $item->classes; if(in_array('has-flyout', $classes)) { $item_html = str_replace('</a>', '</a><a href="'.esc_attr($item->url).'" class="flyout-toggle"><span> </span></a>', $item_html); } $output .= $item_html; } function start_lvl(&$output, $depth = 0, $args = array()) { $output .= "\n$indent<a href=\"#\" class=\"flyout-toggle\"><span> </span></a><ul class=\"flyout\">\n"; } }
In the header, I call it as such
<nav class="horiznav" role="navigation"> <?php wp_nav_menu( array( 'theme_location' => 'main_navigation', 'menu_class' => 'nav-bar', 'echo' => true, 'before' => '', 'after' => '', 'link_before' => '', 'link_after' => '', 'depth' => 2, 'items_wrap' => '<ul class="nav-bar">%3$s</ul>', 'walker' => new kyb_Walker() ) ); ?> </nav>
*************
Right now, I been trying to suss out where the problem is occurring — the CSS or how my call is written in functions.php. That demo site can be seen here (I warn, the color scheme looks horrible right now as I lock in the direction I will be taking this theme)
https://leopardspot.endofinternet.net:8008/wp3sandbox/
Any idea why I cant get flyout-toggle to “toggle” between “display:none” on the child themes (toggle being triggered upon mouse hover of parent item)… ?
- The topic ‘Horizontal Flyouts Not Showing Child Items’ is closed to new replies.