Replace caret in Bootstrap Nav Menu

sage
1

To replace the caret in Bootstrap nav menu you can replace

<span class="caret"></span>

with say,

<i class="fa fa-bolt"></i>

Now - I’m using the wp_bootstrap_walker.php file in my install (not using Sagextras yet), and also have Soil plugin installed, both of which contain references to <span class="caret"></span>.

I can replace the element in wp_bootstrap_walker.php and it works, but is there a more effective way to do it? I imagine I could use a filter hook in lib/extras. If so, would I replace the entire start_el function from wp_bootstrap_walker.php?

That almost seems pointless since that function is what most of the file contains.

2

Hmmm… If using Sageextras, theres hook "sageextras/wp_nav_menu_item’. You can add hook that could filter class="caret" to class="fa fa-bolt"… however class caret has loads of going on for it in bootstrap scss/less, so if I were to replace carret image, i’d rather mess in scss to match actual look and feel needed.

1 Like
3

@Johnny_Bit That was my first thought, but I couldn’t see a place in the CSS to change the actual icon. That can be done?

4

bootstrap caret icon is done by means of borders… you need to look into mixins and vars for specific places and override those with your preferences. that seems to be not much of work.