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.

I've created a mega menu with wordpress. The theme I'm working with happened to use bootstrap and adds so much weird stuff to my menu, and one of those things that seem pretty weird is that it has added a data-target="#" to my parent menu items which basically makes them useless as links.

This might work for some, but I'm trying to make those links clickable, because the children is always displayed.

Here's my menu script:

<?php wp_nav_menu(
  array(
      'theme_location' => 'primary',
      'container_class' => 'collapse navbar-collapse navbar-responsive-collapse',
      'menu_class' => 'nav navbar-nav',
      'fallback_cb' => '',
      'menu_id' => 'main-menu',
      'walker' => new wp_bootstrap_navwalker()
  )
); ?>

Does anyone know how to remove this feature?

share|improve this question

1 Answer 1

Your options are the following:

  1. Extend the walker and change the output (override start_el function)

Here is an example of the Walker, assuming you are using this bootstrap walker.

Usage:

  'walker' => new se150102_bootstrap_walker()

Walker:

class se150102_bootstrap_walker extends wp_bootstrap_navwalker  {
/**
     * This walker is identical to the parent start_el() function, except
     * it does not put href="#" for parent elements.
     *
 * @see wp_bootstrap_navwalker::start_el()
 * @since 3.0.0
 *
 * @param string $output Passed by reference. Used to append additional content.
 * @param object $item Menu item data object.
 * @param int $depth Depth of menu item. Used for padding.
 * @param int $current_page Menu item ID.
 * @param object $args
 */
public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
    $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

    /**
     * Dividers, Headers or Disabled
     * =============================
     * Determine whether the item is a Divider, Header, Disabled or regular
     * menu item. To prevent errors we use the strcasecmp() function to so a
     * comparison that is not case sensitive. The strcasecmp() function returns
     * a 0 if the strings are equal.
     */
    if ( strcasecmp( $item->attr_title, 'divider' ) == 0 && $depth === 1 ) {
        $output .= $indent . '<li role="presentation" class="divider">';
    } else if ( strcasecmp( $item->title, 'divider') == 0 && $depth === 1 ) {
        $output .= $indent . '<li role="presentation" class="divider">';
    } else if ( strcasecmp( $item->attr_title, 'dropdown-header') == 0 && $depth === 1 ) {
        $output .= $indent . '<li role="presentation" class="dropdown-header">' . esc_attr( $item->title );
    } else if ( strcasecmp($item->attr_title, 'disabled' ) == 0 ) {
        $output .= $indent . '<li role="presentation" class="disabled"><a href="#">' . esc_attr( $item->title ) . '</a>';
    } else {

        $class_names = $value = '';

        $classes = empty( $item->classes ) ? array() : (array) $item->classes;
        $classes[] = 'menu-item-' . $item->ID;

        $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );

        if ( $args->has_children )
            $class_names .= ' dropdown';

        if ( in_array( 'current-menu-item', $classes ) )
            $class_names .= ' active';

        $class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';

        $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
        $id = $id ? ' id="' . esc_attr( $id ) . '"' : '';

        $output .= $indent . '<li' . $id . $value . $class_names .'>';

        $atts = array();
        $atts['title']  = ! empty( $item->title )   ? $item->title  : '';
        $atts['target'] = ! empty( $item->target )  ? $item->target : '';
        $atts['rel']    = ! empty( $item->xfn )     ? $item->xfn    : '';

        // If item has_children add atts to a.
        if ( $args->has_children && $depth === 0 ) {
            $atts['href']           = ! empty( $item->url ) ? $item->url : '#';
            $atts['data-toggle']    = 'dropdown';
            $atts['class']          = 'dropdown-toggle';
            $atts['aria-haspopup']  = 'true';
        } else {
            $atts['href'] = ! empty( $item->url ) ? $item->url : '';
        }

        $atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args );

        $attributes = '';
        foreach ( $atts as $attr => $value ) {
            if ( ! empty( $value ) ) {
                $value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
                $attributes .= ' ' . $attr . '="' . $value . '"';
            }
        }

        $item_output = $args->before;

        /*
         * Glyphicons
         * ===========
         * Since the the menu item is NOT a Divider or Header we check the see
         * if there is a value in the attr_title property. If the attr_title
         * property is NOT null we apply it as the class name for the glyphicon.
         */
        if ( ! empty( $item->attr_title ) )
            $item_output .= '<a'. $attributes .'><span class="glyphicon ' . esc_attr( $item->attr_title ) . '"></span>&nbsp;';
        else
            $item_output .= '<a'. $attributes .'>';

        $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
        $item_output .= ( $args->has_children && 0 === $depth ) ? ' <span class="caret"></span></a>' : '</a>';
        $item_output .= $args->after;

        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
    }
}

2. Use JavaScript.

Example here in jQuery

$('#main-menu a').each(function(){
    $(this).removeAttr('data-target');
});
share|improve this answer
    
Hey Eric, great answer and this worked for what I asked. Unfortunately it doesn't seem to have fixed my problem. You can see the site here: screenpartner.norisp.no/~devwilfa –  turtledropbomb Jun 19 at 15:32
    
View my answer above for the walker. –  Eric Holmes Jun 19 at 15:46

Your Answer

 
discard

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.