Centering tabs, linking to a tab from primary navigation with customjs

1 reply · opened Mar 12, 2018

MmimicplayMar 12, 2018

Page with issue: http://spp.awarecreativesolutions.com/services-test.html
Page that looks right but doesn't have the .customjs class active, therefore linking to specific tabs doesn't work: http://spp.awarecreativesolutions.com/services.html

I am trying to add two drop-down menu options from the main navigation's Services menu: Mindfulness Training and Professional Speaking. You can see the links on this page when you hover over Services: http://spp.awarecreativesolutions.com/services-test.html
It is those two links that are supposed to link to specific tabs on the Services page - either the Mindfulness Training tab or the Professional Speaking tab.

Please note that /services-test.html navigation is the only page where I have the drop-down menu beneath Services setup, so if you click around, you'll need to go back to /services-test.html to view the issue since I don't have the drop-down menu setup on the other pages.

I found several threads on these forums discussing how to link to a specific Tab but so far these tips haven't solved my issue:
http://support.semicolonweb.com/forums/topic/how-to-link-to-a-specific-tab-and-show-its-content-from-another-html-page/
http://support.semicolonweb.com/forums/topic/link-to-specific-tab/
http://support.semicolonweb.com/canvas-html-documentation/

I had the /services.html page looking great until I added the .customjs class to the Tabs div (eg: <div class="tabs customjs tabs-alt tabs-justify clearfix" id="tab-10">). The customjs class "broke" the center alignment of the tabs, and after several hours of trying different things, I can't get the two tabs to appear centered on the page.

Can you help me get those tabs center aligned so that they look like my /services.html page?

Here is the footer script I added to the page:


    jQuery(document).ready( function($){
        $( "#tab-10" ).tabs({
            show: {
                effect: "fade",
                duration: 400
            }
        });
    });
	

And here is the code for my menu/navigation:


						

- [Home](/)

- [About](/about.html)

- [Services](/services.html)

- [Mindfulness Training](/services.html#tabs-9)

- [Professional Speaking](/services.html#tabs-10)

- [News](/blog.html)

- [Contact](/contact.html)

- [](https://www.linkedin.com/company/sage-prosperity-partners/)

- [](https://www.facebook.com/sageprosperitypartners/)

- [](https://twitter.com/sage_prosperity)

The other issue is that even with the .customjs class added, the tabs don't load properly all the time. It seems like when I'm on the Mindfulness Training Tab, for example, if I use the navigation drop-down menu to choose the Professional Speaking option, that tab will not load. It only seemed to work when loading it from a separate non-services page.

Can you help me get this non-working bit sorted out?

I'm attaching a screenshot with some notes to help clarify things. Thank you for your help.

MmimicplayMar 13, 2018

Just a quick update: The page's tabs still aren't working the way I want (still not centered and drop-down nav links don't work to switch between the two tabs when you're on the Services page already). I did publish a separate "test site" so you can see the issues more clearly:

http://spp-jekyll.awarecreativesolutions.com/services.html
http://spp-jekyll.awarecreativesolutions.com/services.html#tabs-9
http://spp-jekyll.awarecreativesolutions.com/services.html#tabs-10

In addition to the above questions, is there a way, when a person navigates to the Services tabs using the drop-down menu navigation, that the page content loads without scrolling down the page so much? I'd like the tabs "Mindfulness Training" and "Professional Speaking" to be visible when the page loads in. As it functions now, when someone selects either Services option from the drop-down menu, it seems to scroll them down to the headline of each tab (and even cuts off one of the headlines). Even if the page loaded "pinned" to the very top of the page, that'd be better than what we have now.

Thank you for any help you can give with this.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard