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

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
“license”: “MIT”,
“private”: true,
“dependencies”: {
“bootstrap”: “git://”,
“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">
  <div class="collapse navbar-collapse" id="navbarCollapse">
      if (has_nav_menu('primary_navigation')) :
        wp_nav_menu(['theme_location' => 'primary_navigation', 'walker' => new wp_bootstrap_navwalker(), 'menu_class' => 'nav navbar-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>
  <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 class="nav-item">
        <a class="nav-link" href="#">Features</a>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>

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



Thanks you for you help.

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

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.

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

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

i use this:

Right, that nav walker doesn’t support bs4.

1 Like

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: // # v4.0.0-beta ")

image 1:

image 2:

image 3:

I do not know what else to do

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:


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

@mikespainhower That’s a sweet resource.