How to restore the Bootstrap nav [walkthrough]

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

Very helpful! Thank you @smutek

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

Hey, no problem!

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

1 Like

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!

1 Like

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!