How to change the dropdown ::marker that is being used by WP Bootstrap Navwalker?
SunnyOz opened this issue · 4 comments
I am using the 4.3 class-wp-bootstrap-navwalker.php. (I've tried both the Aug & Oct versions) My setup uses WordPress 5.3 and Bootstrap 4.4. (Note: This site is still in development uses localhost atm).
The navigation menu without any submenu items defined works great. Here is what it looks like - with my customisations to match the theme's colour scheme:
http://haregroup.com.au/source/Nav-without-submenu.png
However when I add a submenu item, the menu bar doesn't look good due to the very large (and strange looking) drop-down marker (indicating that there is a submenu item available). Here is what it looks like:
http://haregroup.com.au/source/Nav-with-submenu.png
How/where can I change/override what drop-down ::marker is used. I would prefer a smaller font-awesome down-arrow if possible.
If I do an inspect element on the navigation bar, this is the code that is displayed:
(Note: below I tried the "insert code" <> icon, but it doesn't display the source code for you, instead it appears to be executing the code, which I don't think is very helpful - so I have also included a link to a file that contains just the source code for the navigation bar)
http://haregroup.com.au/source/Nav-bar-container-code.html
Nav-bar-container-code.zip
`
And here is the class-wp-bootstrap-navwalker.php file I used:
http://haregroup.com.au/source/fiddlefiles/class-wp-bootstrap-navwalker.php
class-wp-bootstrap-navwalker.zip
As it stands now, it looks like I won't be able to use this nav-walker version - as I need 2 levels of menu.
Thanks for any assistance or direction you can provide to help me change the drop-down marker.
Cheers,
SunnyOz
Bootstrap themselves don't support multiple levels of dropdowns since it's not user friendly.
You'll have to look up the css for it, or code it yourself.
@SunnyOz (Assuming you're still using Bootstrap 4) The caret comes from Bootstrap's CSS. See here and here. The compiled CSS should look something like this:
.dropdown-toggle::after {
display: inline-block;
margin-left: .255em;
vertical-align: .255em;
content: "";
border-top: .3em solid;
border-right: .3em solid transparent;
border-bottom: 0;
border-left: .3em solid transparent;
}You may overwrite this like so (FA 4.7):
.dropdown-toggle::after {
font-family: fontawesome;
content: "\f078"; /* chevron down */
font-size: 0.75em;
border-top: 0;
border-right: 0;
border-left: 0;
}Alternatively, you may directly add the FA icon to the title of the nav item and hide Bootstrap's default caret.
Your nav item title should then look like Newsletters <i class="fa fa-chevron-down" aria-hidden="true"></i> and you have to add the following CSS
.dropdown-toggle::after {
display: none;
}Note that this hides the default caret for all (!) dropdowns and you would have to add all toggle indicators manually. Of course, you could do this item specific like so
.menu-item-insert-item-id-here > .dropdown-toggle::after {
display: none;
}