sevenspark

Hi @raoulunger

If you’re using anchor links within the page, you’ll want to set them up using the Scroll To feature. Once the scroll completes, the menu will close automatically.

Hope that helps!

Hi there,

You can’t add PHP within the settings (PHP belongs in PHP files, not stored in the database/settings). If you want dynamic content there, what you can do is use a shortcode.

Hope that helps!

Hi @julmasters

That would mean either your Pro license is not entered properly or not registered properly for your site. If you need assistance, please Submit a Ticket and we can help you out! All Pro support is provided via our support center, where questions are answered daily – these forums are just for the free version which is not frequently monitored. Thanks! ??

Hi Steve,

Most likely there is some third party mobile-specific JS that is breaking things, but I’d need to see it firsthand to assess. If you still need assistance, let me know where I can take a look ??

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

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

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!

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

Hi Lukas,

Glad to hear you got it sorted in a separate element, sounds like it was JS from the popup causing the issue ??

Bellows won’t display descriptions by default, it only displays what is entered in the menu item settings. Either you need to delete them there, or something else is adding them into the menu item settings automatically ??

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

You’re welcome, Lukas ??

Those settings work in all my local tests. There may be some other JS interference as above, I’m not sure. I don’t have a way to troubleshoot your site without access to the code. You may want to try testing out the menu outside of the popup element to see if that is affecting things.

As for that specific page, Bellows does the same thing on every page, so if something different is happening on that page, it means that there is some code specific to that page affecting things. In this case, it appears that there is other JS on your site acting on the menu, adding inline CSS styles to the menu elements which is hiding the submenu

You’ll need to stop whatever JS is acting on the menu from doing so to prevent that. Unfortunately Bellows can’t prevent other JS from acting on it.

Also, after reviewing the second question and finding that other JS is affecting the menu, I’m guessing that that is likely what is also keeping multiple submenus open at the same time in the first question.

Hope that helps!

Sorry, that should be “one()”

jQuery( document ).one( 'elementor/popup/show', () => {
	jQuery( '.bellows' ).bellows();
} );

Hi Lukas,

I believe you are exactly right – I’ve seen this before with Elementor’s popup. They move the nodes within the DOM as you mentioned, and in the process they drop all of the event listeners, so the JS stops working.

From their doc here, it looks like you can hook in when the popup opens:

https://developers.elementor.com/elementor-pro-2-7-popup-events/

Then you can re-initialize Bellows using this JS within the callback:

jQuery( '.bellows' ).bellows();

I’d recommend only calling it once so you don’t reinitialize every time the popup is opened (either by using once() instead of on() or by removing the event listener after it’s executed).

Hope that helps! ??

You’re welcome, glad to hear you found a solution that works for you! ??

Hi norwood451,

Sorry I didn’t see this sooner! If you still have questions, please submit a pre-purchase ticket here so that we’ll see it immediately ?? https://sevenspark.com/pre-purchase

1. It’s compatible with the latest version

2. Can’t tell without seeing it but other CSS on the site may have been overriding it

3. Sure, that’s just HTML placed before or after the widget or shortcode. It wouldn’t be controlled by the menu.

4. The height will automatically size the contents of the menu. You can adjust the vertical spacing of each item in the Pro version.

5. I’m not sure I’m seeing what it looked like when you wrote this, but you’d likely need a bit of custom CSS if you want to get that two-tone look. Should be possible with some custom styling, however.

Hope that helps!