0

I have a Bootstrap theme uploaded to Wordpress and it seems to be working fine except when I try to enter my own menu items.

The code for the php menu is below:

<div class="nav-scroller py-1 mb-2">
  <nav class="nav d-flex justify-content-center">
    <a href="#" class="p-2 px-3 text-muted">
      <?php
        wp_nav_menu(array(
          'theme_location' => 'categoryMenu'
        ));
      ?>
    </a>
  </nav>
</div>

Should you need additional information, please don't hesitate to ask. I will post more code.

Thank you,

The following HTML code from the 'inspection' tool in Chrome:

<?php

          $menuParameters = array(
            'container' => false,
            'echo' => false,
            'items_wrap' => '%3$s',
            'depth' => 0,
          );

          echo strip_tags(wp_nav_menu($menuParameters), '<a>');


        ?>
Improve this question
3
  • 1
    Can you add the generated HTML :) Maybe the CSS classes are missing? Commented Jun 26, 2019 at 16:34
  • Sorry maybe I didn't explain it as best I could - the generated HTML for the menu, i.e. from wp_nav_menu Commented Jun 26, 2019 at 16:44
  • Added, and you've already opened my eyes to the fact that the generated list is under a different HTML element all together. However, still not sure how to fix it... Commented Jun 26, 2019 at 16:57

1 Answer 1

Reset to default
1

The default container the function outputs the menu in is a <div>. This is most likely causing the issue since Bootstrap can't target individual items that are wrapped within it.

Remove it by passing in some additional arguments. You might have to pass in the menu ID explicitly as well.

You can find additional arguments to pass in here: https://developer.wordpress.org/reference/functions/wp_nav_menu/

  <?php
        wp_nav_menu(array(
          'menu' => MENU_ID / MENU_NAME,
          'theme_location' => 'categoryMenu',
          'container' => false
        ));
      ?>
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Hi Jouse, thanks for sending me in the right direction. And we are almost there! However, the following code puts the menu within the <a> but does not accept any Bootstrap class parameters (ie, I can't add <a class="text-mute p-2">. Any additional ideas? $menuParameters = array( 'container' => false, 'echo' => false, 'items_wrap' => '%3$s', 'depth' => 0, ); echo strip_tags(wp_nav_menu($menuParameters), '<a>');
I've included a better version of the code above. Sorry, didn't realize posting here makes it look unreadable.
wp_nav_menu() has limited flexibility since it comes structured out of the box. It'll be tedious to work around or extend its native configuration for your custom menu. Try using wp_get_nav_menu_items() to iterate through individual menu items. That way you're in control of structuring the parent containers.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.