0

I am having an issue with my WordPress nav menu. It is currently looking like this : Wordpress Problem

I am trying to make my bootstrap 3.3.7 (think that's the right version) menu work and that is the error. The line of code i am using is:

<?php wp_nav_menu(array( 'theme-location' => 'main_menu' ) ); ?>

and my functions.php has this code:

function register_my_menus() {
  register_nav_menus(
    array(
      'main_menu'   => __( 'Primary Menu' ),
      'footer_menu' => __('Footer Menu')
    );
  )
}
add_action( 'init', 'register_my_menus' );

I have read that the problem can be solved with walkernav but when trying to use it, it does not work any help?

EDIT: My Header.php

<nav class="navbar navbar-default" role="navigation">
  <div class="container">
    <div class="navbar-header">

      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar top-bar"></span>
        <span class="icon-bar middle-bar"></span>
        <span class="icon-bar bottom-bar"></span>
      </button>

      <a class="navbar-brand" href="<?php  coldstar_the_page_link( 'front-page.php' );  ?>">
        <img src="<?php bloginfo('template_url'); ?>/images/companylogo.png" class="img-responsive hidden-md" alt="Bed Centre Grimsby Logo">
        <img src="<?php bloginfo('template_url'); ?>/images/logo.png" class="img-responsive hidden-lg hidden-sm hidden-xs" alt="">
      </a>
    </div>

    <div id="navbar" class="navbar-collapse collapse">
      <ul class="top-contact hidden-xs hidden-sm">
        <li class="phone">
          <span class="icon"></span>
          01472 267660
        </li>
        <li class="email">
          <span class="icon"></span> <a href="mailto:sales@bedcentregrimsby.co.uk">sales@bedcentregrimsby.co.uk</a>
        </li>
        <li class="facebook">
          <a href="https://www.facebook.com/Bedcentregrimsby/" target="_blank"><img src="http://beta.bedcentregrimsby.co.uk/wp-content/themes/bedcentregrimsby/assets/images/facebook-logo.png"></a>
        </li>
      </ul>

      <div class="nav navbar-nav navbar-right">
        <?php
          wp_nav_menu( array(
            'theme_location'  => 'primary',
            'depth'           => 1,   // 1 = with dropdowns, 0 = no dropdowns.
            'container'       => 'div',
            'container_class' => 'collapse navbar-collapse',
            'container_id'    => 'bs-example-navbar-collapse-1',
            'menu_class'      => 'navbar-nav mr-auto',
            'fallback_cb'     => 'WP_Bootstrap_Navwalker::fallback',
            'walker'          => new WP_Bootstrap_Navwalker()
          ) );
        ?>
      </div>
    </div>
  </div>   <!-- END container -->
</nav>
<div class="feature-nav">
  <div class="container">
    <div class="col-xs-12 col-sm-4 col-md-4 delivery">
      <div class="icon"></div>
      <div class="text">
        <p>FREE Local Delivery<span>We deliver for FREE within a distance of 8 miles.</span></p>
      </div>
    </div>
    <div class="col-xs-12 col-sm-4 col-md-4 parking">
      <div class="icon"></div>
      <div class="text">
      <p>FREE Parking<span>Our carpark is free for our customers.</span></p>
      </div>
    </div>
    <div class="col-xs-12 col-sm-4 col-md-4 disability">
      <div class="icon"></div>
      <div class="text">
      <p>Wheelchair Friendly<span>Our store is accessible for wheelchairs. </span></p>
      </div>
    </div>
  </div>
</div>

EDIT2: This is how it should perform in html

<nav class="navbar navbar-default" role="navigation">
    <div class="container">
        <div class="navbar-header">

            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar top-bar"></span>
                <span class="icon-bar middle-bar"></span>
                <span class="icon-bar bottom-bar"></span>
            </button>


            <a class="navbar-brand" href="<?php  coldstar_the_page_link( 'front-page.php' );  ?>">
                <img src="<?php bloginfo('template_url'); ?>/images/companylogo.png" class="img-responsive hidden-md" alt="Bed Centre Grimsby Logo">
                <img src="<?php bloginfo('template_url'); ?>/images/logo.png" class="img-responsive hidden-lg hidden-sm hidden-xs" alt="">
            </a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="top-contact hidden-xs hidden-sm">
                <li class="phone">
                    <span class="icon"></span>
                    01472 267660
                </li>
                <li class="email">
                    <span class="icon"></span> <a href="mailto:sales@bedcentregrimsby.co.uk">sales@bedcentregrimsby.co.uk</a>
                </li>
                <li class="facebook">
                    <a href="https://www.facebook.com/Bedcentregrimsby/" target="_blank"><img src="http://beta.bedcentregrimsby.co.uk/wp-content/themes/bedcentregrimsby/assets/images/facebook-logo.png"></a>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li class="current"><a href="localhost:81">Home</a></li>
                <li><a href="/about-us">About Us</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Our Products</a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Bedsteads</a></li>
                        <li><a href="#">Bedsteads</a></li>
                        <li><a href="#">Bedsteads</a></li>
                        <li><a href="#">Bedsteads</a></li>
                        <li><a href="#">Bedsteads</a></li>
                        <li><a href="#">Bedsteads</a></li>
                    </ul>
                </li>
                <li><a href="/bed-guide">Bed Guide</a></li>
                <li><a href="/reviews">Reviews</a></li>
                <li><a href="/news">News</a></li>
                <li><a href="/contact-us">Contact Us</a></li>
            </ul>



    </div>
</nav>
  • 1
    Does not work what? Do you use the specialized WP Bootstrap Navwalker which does exactly what you need? – Max Yudin Sep 11 '18 at 13:00
  • I think my issue is I'm not sure how to implement it, I've looked on the documentation but still struggling. – Jenova1628 Sep 11 '18 at 13:13
  • Are you sure you have closed all the Php <?php ?> tags? – benny-ben Sep 11 '18 at 13:18
  • Yes I have made sure I have – Jenova1628 Sep 11 '18 at 13:20
  • Which theme are you using? – benny-ben Sep 11 '18 at 13:23
1

You can try this way:

<nav class="navbar navbar-default" role="navigation">
  <div class="container">
    <div class="navbar-header">

      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar top-bar"></span>
        <span class="icon-bar middle-bar"></span>
        <span class="icon-bar bottom-bar"></span>
      </button>

      <a class="navbar-brand" href="<?php coldstar_the_page_link( 'front-page.php' ); ?>">
        <img src="<?php bloginfo('template_url'); ?>/images/companylogo.png" class="img-responsive hidden-md" alt="Bed Centre Grimsby Logo">
        <img src="<?php bloginfo('template_url'); ?>/images/logo.png" class="img-responsive hidden-lg hidden-sm hidden-xs" alt="">
      </a>
    </div>

    <div id="navbar" class="navbar-collapse collapse">
      <ul class="top-contact hidden-xs hidden-sm">
        <li class="phone">
          <span class="icon"></span>
          01472 267660
        </li>
        <li class="email">
          <span class="icon"></span> <a href="mailto:sales@bedcentregrimsby.co.uk">sales@bedcentregrimsby.co.uk</a>
        </li>
        <li class="facebook">
          <a href="https://www.facebook.com/Bedcentregrimsby/" target="_blank"><img src="http://beta.bedcentregrimsby.co.uk/wp-content/themes/bedcentregrimsby/assets/images/facebook-logo.png"></a>
        </li>
      </ul>

    <?php
          wp_nav_menu( array(
              'container'      => false,
              'menu_id'        => 'joey-ireland',
              'menu_class'     => 'nav navbar-nav navbar-right',
              'items_wrap'     => '<ul id="%1$s" class="%2$s">%3$s</ul>',
              'theme_location' => 'primary',  // must match in register_nav_menus
              'depth'          => 5,
              'fallback_cb'    => false,
              'walker'         => new Joey_Bootstrap_Walker(),
          ));

class Joey_Bootstrap_Walker extends Walker_Nav_Menu {

    function start_lvl(&$output, $depth = 0, $args = Array() ) {
        $indent = str_repeat("\t", $depth);
        $output .= "\n$indent<ul class=\"dropdown-menu\">\n";
    }

    function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
        if ( isset( $args->item_spacing ) && 'discard' === $args->item_spacing ) {
            $t = '';
            $n = '';
        } else {
            $t = "\t";
            $n = "\n";
        }
        $indent = ( $depth ) ? str_repeat( $t, $depth ) : '';

        $has_child = false;
        if ( $args->walker->has_children !== false ) {
            $has_child = true;
        }

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

        $args = apply_filters( 'nav_menu_item_args', $args, $item, $depth );

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

        // Check our custom has_children property.
        $class_drop = '';
        if ( $has_child ) {
            $class_drop = $class_names !== '' ? ' dropdown' : 'dropdown';
        }

        if ( $class_names ) {
          $class_names = ' class="' . esc_attr( $class_names ) . $class_drop . '"';
        } else {
          $class_names = $class_drop !== '' ? ' class="' . $class_drop . '"' : '';
        }

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

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

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

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

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

        if ( $has_child === true ) {
            $attributes .= ' class="dropdown-toggle" data-toggle="dropdown"';
        }

        $title = apply_filters( 'the_title', $item->title, $item->ID );

        $title = apply_filters( 'nav_menu_item_title', $title, $item, $args, $depth );

        $item_output = $args->before;
        $item_output .= '<a'. $attributes .'>';
        $item_output .= $args->link_before . $title . $args->link_after;
        $item_output .= '</a>';
        $item_output .= $args->after;

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

    </div>
  </div>
</nav>
<div class="feature-nav">
  <div class="container">
    <div class="col-xs-12 col-sm-4 col-md-4 delivery">
      <div class="icon"></div>
      <div class="text">
        <p>FREE Local Delivery<span>We deliver for FREE within a distance of 8 miles.</span></p>
      </div>
    </div>
    <div class="col-xs-12 col-sm-4 col-md-4 parking">
      <div class="icon"></div>
      <div class="text">
      <p>FREE Parking<span>Our carpark is free for our customers.</span></p>
      </div>
    </div>
    <div class="col-xs-12 col-sm-4 col-md-4 disability">
      <div class="icon"></div>
      <div class="text">
      <p>Wheelchair Friendly<span>Our store is accessible for wheelchairs. </span></p>
      </div>
    </div>
  </div>
</div>



For documentation, see here:

  • register_nav_menu - Registers a single custom Navigation Menu in the custom menu editor


  • Hey, @benny-ben thanks for this but still the same problem I tried changing the properties to my menu_id and even header-menu. I still get the same error, its so strange to me why it is not working – Jenova1628 Sep 12 '18 at 7:50
  • @JoeyIreland 1) What warnings/errors do you give in the browser console? 2) Is this the theme you're using? 3) Are you sure you've loaded the bootstrap.css and bootstrap.js files with wp_enqueue_style/wp_enqueue_script? – benny-ben Sep 12 '18 at 8:37
  • it's not showing any :/ and I am positive I have loaded them – Jenova1628 Sep 12 '18 at 9:03
0

You have implemented the menu in wrong way, that's why it's not working.

WordPress has provided a detailed documentation on creating menu. You have to go through that first. https://developer.wordpress.org/themes/functionality/navigation-menus/

After implementing that properly then go for walker class. I have not worked with bootstrap 3.3.7 but letting you know that bootstap 4x works fine, seems you have the walker class for version 3x.. you can use that.

Use below link for Bootstrap 4x: https://github.com/wp-bootstrap/wp-bootstrap-navwalker

Here is a tutorial : https://code.tutsplus.com/tutorials/how-to-integrate-a-bootstrap-navbar-into-a-wordpress-theme--wp-33410

<?php wp_nav_menu( array( 'theme_location' => 'primary', 
            'depth' => 1, 
            'container' => 'div', 
            'container_class' => 'collapse navbar-collapse', 
            'container_id' => 'bs-example-navbar-collapse-1', 
            'menu_class' => 'navbar-nav mr-auto', 
            'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback', 
            'walker' => new WP_Bootstrap_Navwalker() ) ); ?>
  • Followed that and still have the lines of code inside of nav – Jenova1628 Sep 11 '18 at 14:02
  • @JoeyIreland Then it seems something wrong with the header.php file, will you be able to add the header.php file to your question? – Latheesh V M Villa Sep 11 '18 at 14:09
  • Yes i will do it now – Jenova1628 Sep 11 '18 at 14:10
  • @JoeyIreland you seems to have commented a php code improperly. Use this :wp_nav_menu( array( 'theme_location' => 'primary', 'depth' => 1, 'container' => 'div', 'container_class' => 'collapse navbar-collapse', 'container_id' => 'bs-example-navbar-collapse-1', 'menu_class' => 'navbar-nav mr-auto', 'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback', 'walker' => new WP_Bootstrap_Navwalker() ) ); ?> – Latheesh V M Villa Sep 11 '18 at 14:21
  • Hey, I have added that code and i am still getting the lines instead of the nav :/ – Jenova1628 Sep 11 '18 at 14:25

Your Answer

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

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