How to restore the Bootstrap nav [walkthrough]

If anyone is interested I made a quick video showing how to add the Bootstrap nav menu back in Sage 8.2.0, should you want to do so. (I hope it’s okay to share this here?)

Adding the navigation back is super easy, so easy that it doesn’t really warrant a video, but I like making videos, so hopefully this is helpful to someone.

(Note: I had a small glitch at the 2:30 mark as I didn’t add the path correctly in the includes, so sorry about that, but I recover quickly.)

Video - https://vimeo.com/126609067

Relevant links:
Nav walker - https://github.com/twittem/wp-bootstrap-navwalker
Bootstrap nav gist - https://gist.github.com/retlehs/1b49f6c00d5140962d56

43 Likes

Thank you for doing this!

Absolutely man, my pleasure! :smile:

@smutek, awesome vid thanks for the walk through. This is defiantly going to help allot of people. I have a student I’ve been teaching Wordpress Theming who is using Sage and I know they will appreciate this,.

1 Like

This is great! Thanks again for posting this quick vid up.

1 Like

Could we not take the nav.php from Roots 7.03 and package that up somehow? If you put a proper bower.json in there or similar, could it not pull it back into the right place? I’d be willing to work on this and share from my Github repo if this sounds like a good solution. The Roots navwalker did some extra stuff that the standard one did not, and I’d like to have that extra functionality.

Bower is not for PHP. See my comment here: Remove nav walker and Bootstrap navbar by retlehs · Pull Request #1427 · roots/sage · GitHub

i encourage someone to create a fork of https://github.com/twittem/wp-bootstrap-navwalker and maintain it, since that repo seems like it needs some love. it would be cool if it had composer support, too.

Composer would be the correct package manager for this case.

Fair enough. There wouldn’t be too much that would need to be done with the older nav.php though, right? It seems like it would just need some around the edges touchup and could be published.

Yep.

:slight_smile:

20 characters.

After a short hiatus from Sage while spending time in Shopify/Timber Land we are back to making bad ass stuff in Sage here. I was just wondering if anyone has done as @ben has suggested and forked this repo and given it some love. If not I would be willing to for the sake of some of the lesser experienced developers sanity.

2 Likes

I want to take a stab at making this work (adopting the previous nav.php as a plugin, as a good exercise in strengthening my coding skills. I might need some help though. We’ll see.

Are you talking about forking the repo and updating/maintaining it? Im happy to co-pilot if thats the case. Feel free to fork it and add me. my Git user is Tidal-Wave.

That repo is kind of a mess. I’ve been meaning to post something I started which tweaks Soil’s NavWalker a little to enable Bootstrap dropdowns. I’ll get that posted as soon as I can.

1 Like

Ok, here’s my first pass:

https://github.com/joemaller/soil/tree/boostrap_navwalker

The project I was doing this for moved to a different menu solution, so I haven’t touched it in a little bit.

Dropdown should work out-of-the-box with Sage, but the menu is stacked vertically. Add the navbar-nav class to the main ul.nav to fix that:

<ul id="menu-soil-nav" class="nav navbar-nav">

From here, I don’t think it’ll be much more work to bring it around to supporting the complete Bootstrap syntax.

Does this make sense in Soil?

I think the idea was to keep it separate. Soil cleans up the ID’s and extra classes on the nav walker, but for something Bootstrap specific, Soil isn’t doing anything with Bootstrap so it would belong in it’s own plugin.

1 Like

The silliness of taking something whose purpose was removing classes and then using it to add classes didn’t go unnoticed, but it seemed like a good place to start.

I was thinking of taking the old nav.php from previous versions (which cleaned up the navwalker) and putting that in it’s own plugin, and making sure that the soil cleanup is not active on top of it. I’ll get something started and report back.

2 Likes

I would love to see a detailed example of a Soil NavWalker with dropdowns.

Using the above links and info I was able to quickly reinstate the Bootstrap menu, however implementing other menu options have been elusive.

I’m new to Gulp and Bower (thanks for the screencast, @ben), but many of the bower packages didn’t seem to be properly configured - unless there’s a problem in my environment - there were missing javascript references after install and compilation. (Some packages worked after manually adding the vendor paths to manifest.json.)

I was able to install slicknav relatively easily with bower:

But it’s really only designed for mobile or maybe tablet-style menu.

Flexmenu also installed fairly easily, but there seemed to be a lot of CSS conflicts:

At this point I’m back to the Bootstrap nav.

This is off topic, but yeah - most Bower packages aren’t properly configured. Ideally, you need to use overrides in bower.json for the packages instead of touching manifest.json

3 Likes

Details on how to do the above: https://github.com/austinpray/asset-builder/blob/master/help/troubleshooting.md

1 Like