Angle down icon doesn’t appear

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

Hello! I have updated the plugin to the latest version but it hasn’t fixed the issue.

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

Hello! Yes, removed all code concerning font-awesome and I add SVGs manually. After reading your suggestion and knowing that I have no coding knowledge. I tried to fix the issue in an easier way and finally managed to solve the problem.

Here is my code:
<span style="float:right;padding-right:12px;">SVG code...</span>

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

Thank you, brother. The one-star rating was just for taking attention in order to receive a reply as soon as possible. I respect your time and effort to make such useful plugins. ??

Hello, again!
After implementing the code I shared above, Google Lighthouse displays the problem in the screenshot: https://drive.google.com/file/d/1AHxHucKtBHQ-MNEfPAastgNscMPl0VI1/view?usp=drivesdk

Link to the explanation: https://web.dev/button-name/

How can I solve this problem?

<span style="float:right;padding-right:12px;" aria-label="sub-categories button" role="img">SVG code...</span>

I tried the above code but it did not work.

• This reply was modified 3 years, 2 months ago by ETO.
• This reply was modified 3 years, 2 months ago by ETO.

I found out that the problem is not related to adding SVGs but it is related to the plugin’s core codes. Because the problem exists although I removed the SVG icons: https://drive.google.com/file/d/1LuqxovHmCCz5rh9zXyzMDz5gYPexGJxb/view?usp=drivesdk

Moreover, there is the same issue on your own site where the demo is displayed: https://drive.google.com/file/d/1dlRCz8ZHlTxMcWh-gHdORAgZ64lLsmLi/view?usp=drivesdk

I would be most grateful if you could release an update fixing this issue as soon as possible since this issue drops the Google Lighthouse “accessibility” score dramatically.

• This reply was modified 3 years, 2 months ago by ETO. Reason: Added new screenshot

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!

I have just added the code to my child theme’s functions.php file on my staging site. The concerning error seems to be gone but a new error has just appeared: https://drive.google.com/file/d/1ZHJaVmwsuJce3apzMcf0alZFMnHmFs87/view?usp=drivesdk

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

Hi!
I am %100 sure that it is related to Bellows. I have just tested your website and the same div element appears as it is on my site: https://drive.google.com/file/d/1IwIU7mmuAJwB_V_EvW9JsBkuU-LwZSmH/view?usp=drivesdk

This div element’s not matching error appears only after adding your add_filter... code.

I will also send my website link via Facebook messenger in case you need to have a look at it.

Have a nice weekend, too!

Edit: After clearing the cache, there seems to be no problem. ??

• This reply was modified 3 years, 2 months ago by ETO.

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