Menu icon Foundation
Using Magellan sticky nav w/ Tabs

Hey guys! Me again...

I'm trying to use Magellan sticky nav with Tabs. I'm able to make the tab bar stick and still have the tabs operational, but I'm unable to make the page scroll to the top of the tab-content with the Magellan options...

I think the problem is that both Magellan and the tabs link use a hash ID on the "a" element to make the magic happen. Do any of you guys know a work around to use both of those features together?

Thanks!

Magellantabs

Hey guys! Me again...

I'm trying to use Magellan sticky nav with Tabs. I'm able to make the tab bar stick and still have the tabs operational, but I'm unable to make the page scroll to the top of the tab-content with the Magellan options...

I think the problem is that both Magellan and the tabs link use a hash ID on the "a" element to make the magic happen. Do any of you guys know a work around to use both of those features together?

Thanks!

Eric Dumensil almost 5 years ago

Thanks but I have already found the answer myself. :)

What I wanted is having a tab-bar somewhere on the page that become fixed as you scroll down and when clicking another tab when at the bottom of the page, it scrolls all the way to the top of the tab-content.

Rafi Benkual almost 5 years ago

Not sure what kind of interaction you are seeking. Magellan is made to scroll down that page. Tabs are meant to reduce scrolling by creating pages within the tabs.

You can use position fixed on the tabs to have them stay at the top of the page on scroll: http://codepen.io/rafibomb/pen/bqoAi

Snapper Cridge almost 5 years ago

@Eric,

Care to share your solution for this. This exactly what I was looking for. I even tried adding data-topbar and setting the class to sticky to no avail. Any help would be appreciated.

Eric Dumensil almost 5 years ago

Sure, here's how my html looks like :

<div id="tabs-container" data-magellan-expedition="fixed">
  <div class="row">
    <div class="small-12 small-centered text-center">
      <ul class="tabs" data-tab data-options="deep_linking:true;scroll_to_content: false">
        <li class="tab-title active" data-magellan-arrival="Panel1"><a href="#Panel1" >Tab1</a></li>
        <li class="tab-title" data-magellan-arrival="Panel2"><a href="Panel2">Tab2</a></li>
        <li class="tab-title last" data-magellan-arrival="Panel3"><a href="#Panel3">Tab3</a></li>
      </ul>
    </div>
  </div>
</div>

<div class="tabs-content">
  <div class="active" id="Panel1" >
    <a name="Panel1"></a>
    <div class="row" data-magellan-destination="Panel1">
      <!-- CONTENT -->
    </div>
  </div>
  <div id="Panel2" >
    <a name="Panel2"></a>
    <div class="row" data-magellan-destination="Panel2">
      <!-- CONTENT -->
    </div>
  </div>
  <div id="Panel3" >
    <a name="Panel3"></a>
    <div class="row" data-magellan-destination="Panel3">
      <!-- CONTENT -->
    </div>
  </div>
</div>

and I overruled a foundation.css style with

[data-magellan-expedition]{
  min-width: 100% !important;
}

I don't remember changing something other than the settings (threshold, fixed_top, etc) at the top in the JS files of Magellan or Tabs.

FYI - I'm not a web developer, I only learned by myself. I'm not saying this is the right way to do it but this works for me.

Hope this helps !

Best,

Eric