Docs

[white-forest]

Hi,
im trying to add a link to an specific tab, i tried several methods i found in the forum but no one of them is working for me,
i tried to add a code to the custom-js and added the class: link_to_tab but it didn’t worked.
Any ideas for my website ?

Greets Felix

[Rahul]

Hey There,

Thanks for writing in!

To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[white-forest]

This reply has been marked as private.

[white-forest]

Another Question i got is the button in the header i can’t align it, so it fits to the links in the navbar.

[Joao]

Hi There,

Please watch this link rgarding the first question.

https://community.theme.co/forums/topic/how-do-i-link-directly-to-a-specific-tab/?replyto=1206198#post-1213208

Regarding the button on the navbar, please add the following code to Appereance > Customizer > Custom > CSS

li.menu-item-868 {
margin-top: -10px;
}

Hope it helps

Joao

[white-forest]

Hi !
I already tried the method and code from your link but that didn’t worked, i have no idea why.

Your css code is working for the button, thanks a lot !

[Lely]

Hi There,

Please remove the class link_to_tab from your menu link. That was just needed when using a button on the same page and linking to specific tab. Normal link will work as long as href value was added correctly. Try again after removing the class.

[white-forest]

Awesome , thank you Lely it is working now !
Thanks for the great support , greets from Germany !

[white-forest]

I’ve got one more question , if i’m on the page with the tab and hit the navbar link , nothing happens . If i’m on another page it works fine.
Any Ideas how to solve that problem ?

[Lely]

Hi There,

You’re welcome!
In that case, please add the class link_to_tab back on the menu but then we need to update the code to this:

  /* Open Tab from Link */
jQuery(function($){
  
  $(document).ready(function() {
    var tabnum = location.href.split("#").slice(-1)[0] ;
     x_scroll_to_tab($, $('.x-nav-tabs .x-nav-tabs-item a[data-cs-tab-toggle="' + tabnum.split("-").slice(-1)[0] + '"]') );
  });

  $('.link_to_tab > a').click(function(e){
    e.preventDefault();
	var tabnum = $(this).attr('href'); 
    x_scroll_to_tab($, $('.x-nav-tabs .x-nav-tabs-item a[data-cs-tab-toggle="' + tabnum.split("-").slice(-1)[0] + '"]'));
  });

});

function x_scroll_to_tab($, tab_nav) {
            $(tab_nav).click();
	            $('html,body').animate({scrollTop: $(tab_nav).offset().top - ( $('.x-navbar').height() + 50 )},700 ,'swing');

}   

The problem on the previous code is that the class is added on list tag of the menu and not directly on the link tag. We have to update the code to look for the link tab now.
Please also update the link. #x-section-2/ is not needed on the href value.

Hope this helps.

[white-forest]

Thank’s you’re awesome , works perfect! Again thanks for the great support !

[white-forest]

I’m really sorry but i’ve got another problem now 😀 I’ve got 2 tables on my page , and i tried to use the same method with link_to_tab but when i’m on one of the two tables i can’t navigate to the other table with the links. Instead of that the links from the other table control the actual table i’m one.

[Lely]

Hi There,

Please update the code to this:

  /* Open Tab from  Menu Link */
jQuery(function($){
  
  $(document).ready(function() {
    var tabnum = location.href.split("#").slice(-1)[0] ;
    if(location.href.indexOf("#tab-") > -1){ 
     x_scroll_to_tab($, $('.x-nav-tabs .x-nav-tabs-item a[data-cs-tab-toggle="' + tabnum.split("-").slice(-1)[0] + '"]') );
    }
  });

  $('.link_to_tab > a').click(function(e){
    
    var current_url =  location.href.split("#").slice(0)[0] ; 
    var current_link = $(this).attr('href').split("#").slice(0)[0]; 
    if(current_url  == current_link){
     e.preventDefault();     
	    var tabnum = $(this).attr('href'); 
      x_scroll_to_tab($, $('.x-nav-tabs .x-nav-tabs-item a[data-cs-tab-toggle="' + tabnum.split("-").slice(-1)[0] + '"]'));

    }

  });

});
function x_scroll_to_tab($, tab_nav) {
            $(tab_nav).click();
	            $('html,body').animate({scrollTop: $(tab_nav).offset().top - ( $('.x-navbar').height() + 50 )},700 ,'swing');

}   

Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding.

[Author]

Posts