Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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);
share|improve this question
    
Why don't you give it a shot and I'm sure the people here will be happy to help you with specific questions along the way. –  Andrew Bartel Dec 10 '13 at 19:12
    
Well, right now I have it just showing the regular menu from Bootstrap, nice and responsive. So I think I'm stuck, trying to wrap my head around making it show/add more than 1 column of links int he back-end. –  user43739 Dec 10 '13 at 19:17

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.