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.
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);