Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1254724

    Hey guys,

    on a one-page website (Main Menu with anchor links) I’m using the Tab Sections element to show the client’s 5 services.

    I’d like to use a Fullwidth Custom Submenu after the Main Menu including those 5 services, on click the page should scroll to the respective tab-items without reloading the page.

    Saw that this is possible in this thread: https://kriesi.at/support/topic/link-to-tab-in-tab-section/

    However I’m not sure which snippet/function I need to add to get that to work for the Submenu. Could you please provide me with it?

    Thx a lot in advance, Regards
    Michael

    #1255601

    Hey micscr,
    Sorry for the very late reply, for your 5 links in your sub-menu to scroll to the 5 tabs, try adding this code to the end of your functions.php file in Appearance > Editor:

    function custom_script(){
      ?>
      <script>
    (function($){
    	function a() {
            $('#sub_menu1 .menu-item-top-level-1 a').on('click', function(e) {
                e.preventDefault();
                $('a[data-av-tab-section-title="1"]').trigger('click');
            });
        }
       function b() {
            $('#sub_menu1 .menu-item-top-level-2 a').on('click', function(e) {
                e.preventDefault();
                $('a[data-av-tab-section-title="2"]').trigger('click');
            });
        }
        function c() {
            $('#sub_menu1 .menu-item-top-level-3 a').on('click', function(e) {
                e.preventDefault();
                $('a[data-av-tab-section-title="3"]').trigger('click');
            });
        }
        function d() {
            $('#sub_menu1 .menu-item-top-level-4 a').on('click', function(e) {
                e.preventDefault();
                $('a[data-av-tab-section-title="4"]').trigger('click');
            });
        }
        function e() {
            $('#sub_menu1 .menu-item-top-level-5 a').on('click', function(e) {
                e.preventDefault();
                $('a[data-av-tab-section-title="5"]').trigger('click');
            });
        }
        a();
        b();
        c();
        d();
        e();
    })(jQuery);
    </script>
    <?php
    }
    add_action('wp_footer', 'custom_script');

    Then clear your browser cache and check.

    Best regards,
    Mike

    #1255929

    Hi Mike,

    Edit/Update: That seems to work perfectly – thanks for the great support!!

    For other users with that need: I initially thought it’s necessary to add ?tabsort=5 et cetera to the links and the menu did open but not scroll down, however with Mike’s script above you just need to link to the main section. Perfect!

    Thx, Regards
    Michael

    • This reply was modified 4 years, 1 month ago by micscr. Reason: Found out how it works ;)
    #1256048

    Hi,
    Glad to hear you sorted it out, sorry I should have explained it better.
    Shall we close this thread then?

    Best regards,
    Mike

    #1256319

    Hi Mike,

    all good, just got confused cause of the other thread at first, but your solution is even better :D

    Yep, that one can be closed. Thx a lot!

    Regards,
    Michael

    #1256696

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

    Best regards,
    Mike

Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Links to specific Tab within Tab-Section (using the Full-Width-Submenu)’ is closed to new replies.