smutek
July 1, 2016, 12:37pm
39
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!
3 Likes
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!
1 Like
jakus
October 5, 2016, 4:27am
41
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:
Took me a while to find it, as the original file still appears to only support up to Bootstrap 3.
11 Likes
jakus
October 5, 2016, 4:28am
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">
☰
</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>
11 Likes
@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.
2 Likes
jakus
November 1, 2016, 10:10pm
44
No worries Paul! Glad I could be of assistance.
vibcruz
November 17, 2016, 7:11pm
45
@jakus this markup works great.
1 Like
smutek
January 9, 2017, 4:42pm
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>
12 Likes
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.
4 Likes
Has anyone been able get bootstrap 4 nav-walker to work with soils-clean-nav?
2 Likes
smutek
May 19, 2017, 5:48pm
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.
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
7 Likes
evance
June 18, 2017, 10:02am
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">
☰
</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>
3 Likes
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.
4 Likes
mZoo
August 22, 2017, 3:45pm
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">
☰
</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.
1 Like
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
Thanks @jasonbaciulis already on that page…
does anybody know how i can change the <ul>
class to navbar-nav? currently the menu is being displayed stacked
This is not a Roots-related question and falls more into general WordPress support. What you’re looking for can be accomplished either with Sass or with the correct arguments in your wp_nav_menu()
call.
https://developer.wordpress.org/reference/functions/wp_nav_menu/