Angle down icon doesn’t appear

I think the latest update will likely resolve this for you 🙂

Okay, first please be sure that you’ve cleared your cache so that you’re loading the latest CSS, which supports styling for Font Awesome’s SVG with JS functionality. I’m assuming that’s what you’re referring to?

If you mean you’ve just removed all Font Awesome resources (no font styles or JS), and are adding SVG markup in manually, then naturally there wouldn’t be any icon present to display there and nothing would appear. In that case, there isn’t an automatic way to swap out SVGs, as the plugin expects the Font Awesome assets to be present.

If that’s the case, then your options would be:

1. Re-enable Bellows’ Font Awesome assets (this is enabled by default with the plugin, and will allow the icons to be displayed)

2. Style the submenu toggles using CSS. You might set the content to +/- for example (rather than using icons), or you could consider using the background-image property with url() setting the SVG either as a direct reference to the file or via a data string

3. You could use Javascript to dynamically replace the i tags with your SVG markup.

4. You could try using the walker_nav_menu_start_el filter to replace the i tag markup with your SVG HTML on the server side. Just be careful as this filter acts on an HTML string, so if this is done wrong it could easily break the menu markup.

Hope that helps

Okay, glad to hear you got it sorted. Yes, if you disable a critical part of the plugin then in general you’d need a custom coding solution in order to customize the plugin to your needs.

I now see that you have also left a 1-star rating. I hope you’ll consider removing that. This is a plugin that is provided free to the community, and the issue you had a question about was not a problem with the plugin itself, but regarding your customizations. We offer a premium version for anyone who needs pro support or pro features. Supporting and maintaining plugins isn’t free, it takes a huge amount of time and effort.

Take care

Thanks for letting me know! I’ll look into this further and make sure that gets addressed in the next update.

For an immediate solution, here’s a filter you can use (in your child theme functions.php ) to add in the aria-label to the buttons

add_filter( 'walker_nav_menu_start_el', 'bm_add_aria_subtoggle', 10, 4 );
function bm_add_aria_subtoggle( $item_output, $item, $depth, $args ){

	if( isset( $args->bellows_source ) ){
		$item_output = str_replace( 'button class="bellows-subtoggle"', 'button class="bellows-subtoggle" aria-label="Toggle Submenu"', $item_output);
	}

	return $item_output;

}

Hope that helps!

Hi there,

When I run the tests on my test site, that test is passed

and it gets a 94 accessibility rating

It’s not clear what element it is highlighting in your screenshot, but I’m guessing it’s not Bellows given that it doesn’t appear on my own site, and that the element that the above code acts upon is not a div.

If you think this is Bellows-related, I’d need to see your site, and know which element you’re referring to, in order to assess it.

Have a great weekend

Glad to hear you got it working 🙂

For your reference, the code in question is not present on the demo site you mentioned, and when I run Lighthouse on the demo site, it passes that test. Seems moot at this point, but just FYI I think possibly that div is coming from an extension you’re running or something like that; it is not part of the Bellows menu.

Take care