Problem in sage for wordpress version: 8.5.2 with bootstrap v4.0.0-beta

sage
,
1

Hi, im work with sage starter theme version: 8.5.2, bootstrap v4.0.0-beta in my bower.json have
{
“name”: “sage”,
“homepage”: “Sage | WordPress Starter Theme | Roots”,
“authors”: [
“Ben Word ben@benword.com”
],
“license”: “MIT”,
“private”: true,
“dependencies”: {
“bootstrap”: “git://github.com/twbs/bootstrap.git#v4.0.0-beta”,
“popper.js”: “^1.12.3”
}
}

and install wp-bootstrap-navwalker.php for my main menu in functions.php i call whith this code require_once get_template_directory() . '/lib/wp-bootstrap-navwalker.php';

in my header.php use:

<nav class="navbar navbar-toggleable-sm navbar-light bg-faded">
  <a class="navbar-brand" href="<?= esc_url(home_url('/')); ?>"><?php bloginfo('name'); ?></a>
  <button class="navbar-toggler hidden-md-up" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
    &#9776;
  </button>
  <div class="collapse navbar-collapse" id="navbarCollapse">
      <?php
      if (has_nav_menu('primary_navigation')) :
        wp_nav_menu(['theme_location' => 'primary_navigation', 'walker' => new wp_bootstrap_navwalker(), 'menu_class' => 'nav navbar-nav']);
      endif;
      ?>
  </div>
</nav>

Important: i test with this code and get the same result

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

but the menu does not look properly, it’s like if the menu is in responsive mode. Can you help me? please.

images1:

menu_1
menu_11779×422 23.2 KB

image2:

menu_2
menu_21815×483 34.7 KB

Thanks you for you help.

2

Is your nav walker compatible w/ Bootstrap v4.0.0-beta?

This has been discussed repeatedly here; you can probably find the solution w/ a quick search, maybe:

1 Like
3

Hi, @mikespainhower, thanks for you answer, i try without wp-bootstrap-navwalker and have the same error, and your resource link, The resource that you have already sent, is explained in this topic, have the error and don´t work for me.

4

what’s the bs4 nav walker you’re using (link)?

it’s expected that your bs4 nav would break without a compatible nav walker.

5

i use this: https://github.com/wp-bootstrap/wp-bootstrap-navwalker

6

Right, that nav walker doesn’t support bs4.

1 Like
7

thanks for your support, I made a new installation from scratch, delete everything, use the snipped code of the bootstrap site and it still does not work, I think it’s sage problem with BS4 (git: //github.com/twbs/bootstrap.git # v4.0.0-beta ")

image 1:

code_e1
code_e11506×621 112 KB

image 2:

code_e2
code_e21812×581 28.4 KB

image 3:

code_e3
code_e31823×477 30.1 KB

I do not know what else to do

8

My mistake, the nav walker isn’t your problem, but the markup you provided seems to default to a collapsed nav menu.

Try pasting the following html into your template and LMK if it still gives you problems:

3 Likes
9

Thanks you for you help, you were right, the code that you gave me worked perfectly, thank you very much.

10

@mikespainhower That’s a sweet resource.