The conflict between the Astra theme and the Kadence block

  • When the smooth scrolling option is enabled, clicking on the tab tab scrolls the page. The solution could be to refine the selector in the js of the Astra theme.

    It was
document.querySelectorAll('a[href*="#"]:not([href="#"]):not([href="#0"])');

Become
document.querySelectorAll('a[href*="#"]:not([href="#"]):not([href*="tab"]):not([href="#0"])');

You can also add this: :not([href*="popup"])

Viewing 7 replies - 1 through 7 (of 7 total)

  • Hi @andreslav,

    Would you mind share the steps to replicate this, so I can try it on my end?

    Looking forward to hearing from you.

    Kind regards,
    Herman ??

    Thread Starter Andreslav

    (@andreslav)

    Hi @bsfherman,

    I have now found out that the problem is not always reproduced. Here it is, try to explore: link.

    Hi @andreslav,

    It would be helpful if you can share a video point out this.

    Kind regards,
    Herman ??

    Thread Starter Andreslav

    (@andreslav)

    Hi @bsfherman,

    Here: gif. The page scrolls up somewhere. Tested in Firefox and Edge.
    Did you manage to reproduce it?

    Hi @andreslav,

    So, instead of just open the tab on the right side, it also drags you to the top. Is that the problem?

    Anyway, how did you create the sections where the tabs stay on the left and the images on the right of the tabs? Third-party plugin? What is it? I will try to replicate it on my end. Your site is site protected now, so I can’t inspect.

    Kind regards,
    Herman ??

    Thread Starter Andreslav

    (@andreslav)

    I’m sorry for the delay.
    Yes, I closed the site…

    I found additional problem conditions: it is played if the “Tabs” are inside the “Row Layout”.

    The “kadence” blocks are used. Here is a ready-made minimal html fragment (preview):

    <!-- wp:kadence/column {"borderWidth":["","","",""],"uniqueID":"_6bd911-aa","borderStyle":[{"top":["","",""],"right":["","",""],"bottom":["","",""],"left":["","",""],"unit":"px"}]} -->
<div class="wp-block-kadence-column kadence-column_6bd911-aa"><div class="kt-inside-inner-col"><!-- wp:kadence/tabs {"uniqueID":"_640557-b8","layout":"vtabs"} -->
<div class="wp-block-kadence-tabs alignnone"><div class="kt-tabs-wrap kt-tabs-id_640557-b8 kt-tabs-has-3-tabs kt-active-tab-1 kt-tabs-layout-vtabs kt-tabs-tablet-layout-inherit kt-tabs-mobile-layout-inherit kt-tab-alignment-left "><ul class="kt-tabs-title-list"><li id="tab-tab1" class="kt-title-item kt-title-item-1 kt-tabs-svg-show-always kt-tabs-icon-side-right kt-tab-title-active"><a href="#tab-tab1" data-tab="1" class="kt-tab-title kt-tab-title-1 "><span class="kt-title-text">Tab 1</span></a></li><li id="tab-tab2" class="kt-title-item kt-title-item-2 kt-tabs-svg-show-always kt-tabs-icon-side-right kt-tab-title-inactive"><a href="#tab-tab2" data-tab="2" class="kt-tab-title kt-tab-title-2 "><span class="kt-title-text">Tab 2</span></a></li><li id="tab-tab3" class="kt-title-item kt-title-item-3 kt-tabs-svg-show-always kt-tabs-icon-side-right kt-tab-title-inactive"><a href="#tab-tab3" data-tab="3" class="kt-tab-title kt-tab-title-3 "><span class="kt-title-text">Tab 3</span></a></li></ul><div class="kt-tabs-content-wrap"><!-- wp:kadence/tab {"uniqueID":"_517054-7a"} -->
<div class="wp-block-kadence-tab kt-tab-inner-content kt-inner-tab-1 kt-inner-tab_517054-7a"><div class="kt-tab-inner-content-inner"></div></div>
<!-- /wp:kadence/tab -->

<!-- wp:kadence/tab {"id":2,"uniqueID":"_feb35b-ac"} -->
<div class="wp-block-kadence-tab kt-tab-inner-content kt-inner-tab-2 kt-inner-tab_feb35b-ac"><div class="kt-tab-inner-content-inner"></div></div>
<!-- /wp:kadence/tab -->

<!-- wp:kadence/tab {"id":3,"uniqueID":"_dcd2dc-dd"} -->
<div class="wp-block-kadence-tab kt-tab-inner-content kt-inner-tab-3 kt-inner-tab_dcd2dc-dd"><div class="kt-tab-inner-content-inner"></div></div>
<!-- /wp:kadence/tab --></div></div></div>
<!-- /wp:kadence/tabs --></div></div>
<!-- /wp:kadence/column -->

    Hi @andreslav, sorry for the long delay.

    Are you still facing the same with the latest version of Astra, which currently is v4.1.4?

    Kind regards,
    Herman ??

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘The conflict between the Astra theme and the Kadence block’ is closed to new replies.

Tags