How to restore the Bootstrap nav [walkthrough]


#42

And this would be a potential new markup for Bootstrap 4 Navbar:

<nav class="navbar 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-toggleable-sm" id="navbarCollapse">
      <?php
      if (has_nav_menu('primary_navigation')) :
        wp_nav_menu(['theme_location' => 'primary_navigation', 'walker' => new wp_bootstrap_navwalker(), 'menu_class' => 'pull-md-right nav navbar-nav']);
      endif;
      ?>
  </div>
</nav>

#43

@jakus, thanks so much for those last two posts. Combined with @mohsinr’s instructions above, those saved the day for me. Worked like a charm.


#44

No worries Paul! Glad I could be of assistance. :slight_smile:


#45

@jakus this markup works great.


#46

Here’s an updated version accounting for Blade in Sage 9 -

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">

  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
          data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
          aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <a class="navbar-brand" href="{{ home_url('/') }}">{{ get_bloginfo('name', 'display') }}</a>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    @if (has_nav_menu('primary_navigation'))
      {!! wp_nav_menu(['theme_location' => 'primary_navigation', 'walker' => new wp_bootstrap_navwalker(), 'menu_class' => 'navbar-nav mr-auto']) !!}
    @endif
  </div>
</nav>


#48

Might also be worth noting that in Sage 9, the wp_bootstrap_navwalker.php goes in sage/src/ (as opposed to lib).

And including it to your functions.php looks a little different now:

array_map(function ($file) use ($sage_error) { $file = "src/{$file}.php"; if (!locate_template($file, true, true)) { $sage_error(sprintf(__('Error locating <code>%s</code> for inclusion.', 'sage'), $file), 'File not found'); } }, ['helpers', 'setup', 'filters', 'admin', 'wp_bootstrap_navwalker']);

At least that’s how I got it all working.


#49

Has anyone been able get bootstrap 4 nav-walker to work with soils-clean-nav?


#50

I recently put this together and have been meaning to share it here. It’s based on Soils clean nav and Michael Romero’s Sageextras plugin.

Basic output looks like:

- ul id="menu-main" class="navbar-nav mr-auto"
  -  li class="nav-item menu-item menu-page-1"
    - a class="nav-link" 

It also supports drop downs.

Setup should be pretty self explanatory, but I’m going to update my original post, or make a new one, this weekend. In the mean-time, header markup and instructions are in the full gist. Hope this is helpful.


Right Way to Add New Walker to Sage 9
#51

Had to perform one minor correction on your code (might be due to recent changes in Bootstrap), the navbar-toggleable-sm-class needs to sit on nav instead of the nested #navbarCollapse to trigger correctly:

<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' => 'pull-md-right nav navbar-nav']);
      endif;
      ?>
  </div>
</nav>

#52

Not sure if this is a one-off issue, but I just updated a theme mid-development to Boostrap 4 Beta (from alpha 6), and my navbar was always collapsed. Even on XL screens.

I skimmed over a similar issue on a Bootstrap Ruby issue, and found a quick fix. In my case, switching navbar-toggleable-md to navbar-expand-lg.

It’s working for now.


#53

Here’s the Docs for Bootstrap 4 Beta nav.

It’ll be something along the lines of

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <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' => 'pull-md-right nav navbar-nav']);
          endif;
          ?>
      </div>
    </nav>

Note: only first line is different from above markup examples.