Menu icon Foundation

Designer | Spanish Fork, UT

My Posts



My Comments

Matthew commented on Matthew's post almost 4 years

Thanks Karl, I implemented a similar JS not 5 minutes after I posted this question. Thanks again.

Matthew commented on Carlo Laitano's post almost 4 years

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>

Posts Followed

No Content

Following

    No Content

Followers

My Posts

My Comments

You commented on Matthew's post almost 4 years

Thanks Karl, I implemented a similar JS not 5 minutes after I posted this question. Thanks again.

You commented on Carlo Laitano's post almost 4 years

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>

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content