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

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.