How to restore the Bootstrap nav [walkthrough]

smutek · June 10, 2016, 2:29pm

Hey Randy, those questions pertain more to Bootstrap than they do to Sage. If you google something like ‘bootstrap hover open’ I think you’ll find it’s been covered a lot.

Good luck!

randzgonz02 · June 13, 2016, 4:45am

I don’t think so, because when I check the the wp_bootstrap_navwalker.php file it seems it must be changed the actual parent url to “#” always, somewhere on line 85 https://goo.gl/jhhOk1.

I hope we could have the chance to choose whether we want to replace the parent url or not, which will make it on hover state anytime we want. I don’t know if this is possible using your nav walker with bootstrap.

mohsinr · July 1, 2016, 11:13am

Hi,

I am new to Roots/Sage project. What a wonderful project with my fav tools for dev.

Thank you so much for making this short video and helping me get started with the NAV menu, as I was thinking Sage had all Bootstrap stuff but after some googling and your helpful post and video I am able to fix only issue I faced on first try of Sage i.e. the nav markup.

For people who may have not luxury to watch video due to workplace or anything. Here are steps performed by Jimmy Smutek in the video for quick overview:

Three Easy Steps :

1. Download Php file and place it in “lib” folder inside your theme directory.
a. Download from this github repo https://github.com/twittem/wp-bootstrap-navwalker
b. Php File you need to download and copy to lib folder is wp_bootstrap_navwalker.php

2. Link Walker Php Class File from your “functions.php” file: Open your functions.php file, and link this newly copied file there in $sage_includes array, where you see e.g lib/assets.php already included. You just include another line e.g. lib/wp_bootstrap_navwalker.php

3. Add HTML Markup in Header.php file from following gist: Open this gist https://gist.github.com/retlehs/1b49f6c00d5140962d56 and copy all the HTML markup, to your header.php file, replacing the existing header markup there.

That is it! You will have working Bootstrap based menu with dropdown support. Thanks to Sage developers for awesome starter theme and thanks to Jimmy for making my first day with Sage/Roots awesome with his short video guide!

smutek · July 1, 2016, 12:37pm

Glad you’ve found it helpful! I’ve been meaning to update that video. Here’s another approach that’s even easier -

Install and activate the Sagextras plugin by Michael Romero - https://github.com/storm2k/sagextras

Add add_theme_support('se-nav-walker'); to your functions, I usually drop this in the top of lib/setup.php, right below the Soil stuff.

Replace the contents of header.php with the contents of this gist - https://gist.github.com/johnny-bit/cc8840f148da01c2af52

That’s it!

mohsinr · July 1, 2016, 12:42pm

Thank you for showing alternative approach it may help even more users!

By the way I find non-plugin solution better so I can easily package the theme and deliver to client with no extra plugin dependencies.

Loving the awesome work which has been done in this project! Thanks to all contributing developers!

jakus · October 5, 2016, 4:27am

Not sure if this has been covered, but since Bootstrap 4 has been included in Sage by default, there is a new wp_bootstrap_navwalker.php file that can be used:

github.com

sebakerckhof/wp-bootstrap-navwalker/blob/580e114965778a495464c6755a202c07cdbbb58d/wp_bootstrap_navwalker.php

<?php

/**
 * Class Name: wp_bootstrap_navwalker
 * GitHub URI: https://github.com/twittem/wp-bootstrap-navwalker
 * Description: A custom WordPress nav walker class to implement the Bootstrap 3 navigation style in a custom theme using the WordPress built in menu manager.
 * Version: 2.0.4
 * Author: Edward McIntyre - @twittem
 * License: GPL-2.0+
 * License URI: http://www.gnu.org/licenses/gpl-2.0.txt
 */

class wp_bootstrap_navwalker extends Walker_Nav_Menu {

		/**
	 * @see Walker::start_lvl()
	 * @since 3.0.0
	 *
	 * @param string $output Passed by reference. Used to append additional content.
	 * @param int $depth Depth of page. Used for padding.

This file has been truncated. show original

Took me a while to find it, as the original file still appears to only support up to Bootstrap 3.

jakus · October 5, 2016, 4:28am

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>

farmerpaul · November 1, 2016, 9:27pm

@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.

jakus · November 1, 2016, 10:10pm

No worries Paul! Glad I could be of assistance.

vibcruz · November 17, 2016, 7:11pm

@jakus this markup works great.

smutek · January 9, 2017, 4:42pm

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>

masoninthesis · January 11, 2017, 2:11am

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.

Daniel_Willitzer · January 26, 2017, 4:48am

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

smutek · May 19, 2017, 5:48pm

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.

gist.github.com

https://gist.github.com/smutek/cd95c8bc4f1db70ee1eda2740bfbf6fd

Bootstrap4Nav-Sage9.md

## Credit
This is a frankensteind version of the current [Soil](https://github.com/roots/soil) nav walker, by the Roots team, and Michael Remoero's [Sagextras](https://github.com/storm2k/sagextras) walker. All credit goes to those good folks. :)

## Use

- Replace the contents of header.blade.php with the attached header.
- Copy the walker.php file to the /app directory.
- Add `walker.php` to the [Sage required files array](https://github.com/roots/sage/blob/master/resources/functions.php) in `resources/functions.php` - eg. on a stock Sage install the entry would look like:  
```php
/**

This file has been truncated. show original

header.blade..php

<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>

This file has been truncated. show original

walker.php

<?php

namespace App;

/**
 * Class NavWalker
 * 
 * Bootstrap 4 walker with cleaner markup for wp_nav_menu()
 * For use with Sage >= 8.5
 *

This file has been truncated. show original

evance · June 18, 2017, 10:02am

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>

masoninthesis · August 18, 2017, 4:01am

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.

mZoo · August 22, 2017, 3:45pm

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.

AmirFarid · June 7, 2018, 4:37pm

can anyone provide a step by step process to getting this working with the latest version of sage? seems like most of the references are out of date and dont apply to the latest version of sage

jasonbaciulis · June 8, 2018, 4:35pm

AmirFarid · June 8, 2018, 4:48pm

Thanks @jasonbaciulis already on that page…