How to restore the Bootstrap nav [walkthrough]

reil86 · May 28, 2015, 1:03pm

Very helpful! Thank you @smutek

shaimoom · June 2, 2015, 4:35am

@smutek How did you get the dropdowns to work? Thanks for the vid!

smutek · June 2, 2015, 4:10pm

Hey, no problem!

I had Soil installed and activated, aside from that I did nothing additional, outside of what you see in the video.

buswell · June 22, 2015, 1:33am

This video is great. Thanks for making it. Actually your little error kept me on my toes by thinking why it was wrong. Good stuff that you debugged it in real time!

After reading on forums so much was a nice change to hear a real human talking through their dev environment!

buswell · June 22, 2015, 2:08am

Just my two cents, I was reading before about all the stick* Ben was getting after making the changes to the Bootstrap menu. The Bootstrap menu works great for a quick small site like I’m doing now, but for any site with a proper budget and a designer involved, it just gets in the way.

I’ve spent countless hours just fighting against the Bootstrap menu because no designer will ever make a design like this!

Great work again guys

*British English - hopefully doesn’t mean anything very offensive otherside of the pond!

yeah · June 24, 2015, 10:51am

hi,
thank you for this video!

it was very useful to restore the navwalker menu…but the soil clean urls doesn’t work for me.

there’s a solution for multilevel drop down menu too?

thanks

sunil · June 28, 2015, 12:05am

Glad I’m not the only one having this issue.

I’ve had no problem restoring the bootstrap walker. First-level dropdowns work fine.
However my second-level dropdowns aren’t really working.

If a user clicks on a navigation within a dropdown which is itself a parent for second-level dropdown, then the second level menu will not show as expected.

Foxaii · June 28, 2015, 12:20am

Bootstrap removed sub-menu support in version 3. You’ll need to edit the walker and add your own CSS to support it.

jdcauley · July 2, 2015, 6:32pm

Thank you , saved me a bit of time

macronweb · July 26, 2015, 7:27pm

Hi everyone! Must say many thanks to @smutek for the nice video. Now I got the bootstrap menu working but unfortently now the soil-nav-walker isn’t working. It did before I added the bootstrap nav. Is there anyone else who got problem with this ?

ben · August 3, 2015, 2:31am

They are two different nav walkers. By using the Bootstrap nav walker, the Soil one isn’t applied anymore.

Carolyn_Porter · November 1, 2015, 12:32am

Thank you so much! Very well done and easy to follow.

nickkuijpers · November 19, 2015, 11:45pm

Hi there!

If you need to manipulate the output of the WordPress navigation other than the normal Bootstrap Walker, i’ve created a function for that. You can define all the required classes based on the level of the menu with or without submenu. Maybe it could help someone.

randzgonz02 · June 10, 2016, 10:32am

Hello, may I know how can I restore the parent url rather than replacing them to “#”? Is it possible for the submenu be shown during hover state and not just when clicking the parent menu? I would like to know how can I do it as I also want to be able to click and load the parent menu page rather than just clicking them just to show the submenu. I hope you guys understand what I am trying to say…

Thank you in advance,
Randy

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.