Creating a Mega Menu

Currently I am creating a theme based on BootStrap 3.0. And the design I came up with utilizes a Mega Menu Navigation. Right now I’m trying to add YAMM3 – Yet Another Mega Menu for Bootstrap 3, however I’m not used to doing anything but a simple drop down menu in WordPress. Can anyone guide me or push me in the right direction on where to get started?

I have already created a Bootstrap 3 Theme, I’m just lost on how to add the Mega Menu correctly.

Read More

Thank you

EDIT: This is what I currently have, that only shows a regular BootStrap 3 responsive nav menu.

  class Cwd_wp_bootstrapwp_Walker_Nav_Menu extends Walker_Nav_Menu {

function display_element ($element, &$children_elements, $max_depth, $depth = 0, $args, &$output) {
  // check, whether there are children for the given ID and append it to the element with a (new) ID
  $element->hasChildren = isset($children_elements[$element->ID]) && !empty($children_elements[$element->ID]);

  return parent::display_element($element, $children_elements, $max_depth, $depth, $args, $output);
}

// CHANGE .sub-menu INTO .dropdown-menu
function start_lvl(&$output, $depth) {
  $indent = str_repeat("t", $depth);
  $output .= "n$indent<ul class="dropdown-menu">";
}

function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
  $item_html = '';
  parent::start_el($item_html, $item, $depth, $args);
  $output .= sprintf('<small>%s</small>', esc_html($item->description));

  if (($item->hasChildren) && ($depth === 0)) {
    $item_html = str_replace('<a', '<a class="dropdown-toggle" data-toggle="dropdown" data-target="#"', $item_html);
    $item_html = str_replace('</a>', ' <b class="caret"></b></a>', $item_html);
  }

  $output .= $item_html;
}

}

function cwd_wp_bootstrapwp_nav_menu_css_class($classes, $item) {
// CHANGE .current-menu-item .current-menu-parent .current-menu-ancestor INTO .active
$classes = preg_replace('/(current(-menu-|[-_]page[-_])(item|parent|ancestor))/', 'active', $classes);

// Add the .dropdown class to the list items that have children
if ($item->hasChildren) {
  $classes[] = 'dropdown';
  //$classes[] = 'yamm-fw';
}

return $classes;
}
add_filter('nav_menu_css_class', 'cwd_wp_bootstrapwp_nav_menu_css_class', 10, 2);

Related posts