Menu icon Foundation
Top Bar with Magellan-like behavior

Has anyone combined Magellan with Top Bar? I want to have a Top Bar that isn't the main navigation, but appears much like Magellan after certain vertical scroll and then remains sticky. The links would not be same-page anchors, but global site links like a normal Top Bar would have. It would look exactly like any normal Top Bar would with the logo, menu items, search bar and a drop down.

Any ideas and tips would be appreciated.

Magellantop barnavigation

Has anyone combined Magellan with Top Bar? I want to have a Top Bar that isn't the main navigation, but appears much like Magellan after certain vertical scroll and then remains sticky. The links would not be same-page anchors, but global site links like a normal Top Bar would have. It would look exactly like any normal Top Bar would with the logo, menu items, search bar and a drop down.

Any ideas and tips would be appreciated.

Matthew over 5 years ago

I was just wondering about the same thing and got this to work on the first try. You also need to remove the background color and padding from [data-magellan-expedition] in the foundation.css file.

<div data-magellan-expedition="fixed">
<nav class="top-bar" data-topbar>
<ul class="title-area">
    <li class="name">
      <h1><a href="#">Test Nav</a></h1>
    </li>
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>

  <section class="top-bar-section">
    <!-- Right Nav Section -->
    <ul class="right">
    <li class="divider"></li>
    <li data-magellan-arrival="first"><a href="#first">First</a></li>
    <li class="divider"></li>
    <li data-magellan-arrival="second"><a href="#second">Second</a><li>
    </ul>
  <nav>
</div>

Rui Alexandre over 5 years ago

the last nav should be ;) careful when copy/pasting it.

cosmoSwiller over 4 years ago

I've done something similar but am finding that when I go down to mobile sized screens (small) and scroll down the page and then return to the top I'm seeing two menus.