Toggles of accordions are covered by the sticky header

Hey Ueli,

Thank you for opening a new thread and for the clarification.

To fix the issue with the toggles and make sure that the toggle title is visible on click, we edited the enfold/config-templatebuilder/avia-shortcodes/toggles/toggles.js file around line 47 and adjusted the scoll_target value.

 //check if toggle title is in viewport. if not scroll up
				    var el_offset = content.offset().top,
				        scoll_target = el_offset - 50 - parseInt($('html').css('margin-top'),10);

				    if(win.scrollTop() > el_offset)
				    {
				        $('html:not(:animated),body:not(:animated)').animate({scrollTop: scoll_target - 100},200);
				    }

We decrease the scoll_target by a 100px in this line.

  $('html:not(:animated),body:not(:animated)').animate({scrollTop: scoll_target - 100},200);

This is where the document scrolls after the modification.

Screenshot: https://1drv.ms/u/s!AjjTfXSRbKTvwErLVZRV0yQ3_poa?e=1cHiGh

Please make sure to purge the cache before testing the page, or check the site on incognito mode.

Best regards,
Ismael

Hi!

Thank you for testing the changes.

What happens when you remove the condition or check in this code?

  if(win.scrollTop() > el_offset)
				    {
				        $('html:not(:animated),body:not(:animated)').animate({scrollTop: scoll_target - 100},200);
				    }

Just replace the whole code with this line to make sure that the document scrolls to the target when you click a toggle.

 $('html:not(:animated),body:not(:animated)').animate({scrollTop: scoll_target - 100},200);

Please make sure to purge the cache and disable the Enfold > Performance > File Compression settings before testing the page.

Regards,
Ismael

Hi,

Sometimes you can slightly see the above toggle, sometimes not.

We can reproduce this occasionally but we are not sure what is causing it. It is barely noticeable though and the toggle title is perfectly visible on click. It only happens maybe once every 10 clicks.

Best regards,
Ismael

Hi,

You can override an existing element in your child theme by creating a new shortcode path in the child theme directory. Please check this documentation.

// https://kriesi.at/documentation/enfold/intro-to-layout-builder/#add-elements-to-alb

Once you have a copy of the toggles shortcode files (js, php) in the shortcodes folder within the child theme directory, you have to update the script path in the extra_assets function in the toggles.php file. Look for this code around line 115.

function extra_assets()
		{
			//load css
			wp_enqueue_style( 'avia-module-toggles', AviaBuilder::$path['pluginUrlRoot'] . 'avia-shortcodes/toggles/toggles.css', array( 'avia-layout' ), false );

				//load js
			wp_enqueue_script( 'avia-module-toggles', AviaBuilder::$path['pluginUrlRoot'] . 'avia-shortcodes/toggles/toggles.js', array( 'avia-shortcodes' ), false, true );
		}

Best regards,
Ismael

Hi,

Since the crucial changes are in toggles.js, why do I have to edit toggles.php as well?

Because you have to tell the shortcode to load the modified js file in the child theme directory instead of the original script. You can only do that by editing the extra_assets function in the toggles.php file as previously mentioned. You can find an example of the path modification here.

// https://kriesi.at/support/topic/standard-setting-for-video-element/#post-1344649

As you may notice, the AviaBuilder::$path[‘pluginUrlRoot’] is replaced with get_stylesheet_directory_uri() function to retrieve the child theme folder and the path avia-shortcodes is replaced with shortcodes because that is the name of the new folder in the child theme directory.

If you have any additional questions at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.

Thanks!

Best regards,
Ismael

Hi,
Glad Ismael could help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike