Menu icon Foundation
F6 Stick Topbar with responsive Menu?

Hi all,

currently trying to setup a top-bar menu with a responsive menu. With following building block I was able to achive this:
http://zurb.com/building-blocks/f6-top-bar

Nevertheless I'm still struggeling to get this one now sticky to the header as it's a top-bar menu that should follow the user while scrolling down.
I fould following documentation but was not able to merge them now in a working solution: http://foundation.zurb.com/sites/docs/magellan.html

Can you support in how to merge these two things together?

Thanks
Best

top-barsticky

Hi all,

currently trying to setup a top-bar menu with a responsive menu. With following building block I was able to achive this:
http://zurb.com/building-blocks/f6-top-bar

Nevertheless I'm still struggeling to get this one now sticky to the header as it's a top-bar menu that should follow the user while scrolling down.
I fould following documentation but was not able to merge them now in a working solution: http://foundation.zurb.com/sites/docs/magellan.html

Can you support in how to merge these two things together?

Thanks
Best

Brian Tan over 3 years ago

Wrap the responsive header around 2 sticky containers, and give it an anchor.

<div id="stickhere" />
<div data-sticky-container>
  <div style="width:100%" class="sticky" data-sticky
    data-options="marginTop:0;anchor:stickhere;stickyOn:small">
      <div class="title-bar" data-responsive-toggle="topbar" data-hide-for="medium">
        <button class="menu-icon" type="button" data-toggle></button>
        <div class="title-bar-title">Menu</div>
      </div>

      <div id="topbar" class="top-bar">
       <div class="top-bar-left">
        <ul class="dropdown menu" data-dropdown-menu>
          <li class="menubutton"><a href="index.html">Home</a></li>
          <li class="has-submenu">
            <a href="#">About</a>
            <ul class="submenu menu vertical" data-submenu>
              <li><a href="#">One</a></li>
              <li><a href="#">Two</a></li>
              <li><a href="#">Three</a></li>
            </ul>
          </li>
        </ul>
      </div>
  </div>
</div>


Randy John over 3 years ago

Thanks - in general working, but one use-case where I have issues. Just put this also into a div and then sticky is not working anymore:

    <div class="row">
      <div class="large-12 columns">
<div id="stickhere" />
<div data-sticky-container>
  <div style="width:100%" class="sticky" data-sticky
    data-options="marginTop:0;anchor:stickhere;stickyOn:small">
      <div class="title-bar" data-responsive-toggle="topbar" data-hide-for="medium">
        <button class="menu-icon" type="button" data-toggle></button>
        <div class="title-bar-title">Menu</div>
      </div>

      <div id="topbar" class="top-bar">
       <div class="top-bar-left">
        <ul class="dropdown menu" data-dropdown-menu>
          <li class="menubutton"><a href="index.html">Home</a></li>
          <li class="has-submenu">
            <a href="#">About</a>
            <ul class="submenu menu vertical" data-submenu>
              <li><a href="#">One</a></li>
              <li><a href="#">Two</a></li>
              <li><a href="#">Three</a></li>
            </ul>
          </li>
        </ul>
      </div>
  </div>
</div>
</div>
</div>
</div>

Brian Tan over 3 years ago

Try making the .row div an anchor

<div id="stickhere" class="row columns expanded">

<div data-sticky-container>
  <div style="width:100%" class="sticky" data-sticky
   data-options="marginTop:0;anchor:stickhere;stickyOn:small">

Randy John over 3 years ago

Stil don't really get the proper result... let's say I have 1 row with 2 elements. The Menu should be left, right some text.
If I scroll down afterwards, the menu should become sticky and full-size as a topbar.

    <div class="row">
      <div class="large-10 columns">
        Title

<div id="stickhere" />
<div data-sticky-container>
  <div style="width:100%" class="sticky" data-sticky
    data-options="marginTop:0;anchor:stickhere;stickyOn:small">
      <div class="title-bar" data-responsive-toggle="topbar" data-hide-for="medium">
        <button class="menu-icon" type="button" data-toggle></button>
        <div class="title-bar-title">Menu</div>
      </div>

      <div id="topbar" class="top-bar">
       <div class="top-bar-left">
        <ul class="dropdown menu" data-dropdown-menu>
          <li class="menubutton"><a href="index.html">Home</a></li>
          <li class="has-submenu">
            <a href="#">About</a>
            <ul class="submenu menu vertical" data-submenu>
              <li><a href="#">One</a></li>
              <li><a href="#">Two</a></li>
              <li><a href="#">Three</a></li>
            </ul>
          </li>
        </ul>
      </div>
  </div>
</div>
</div>

      </div>
    <div class="large-2 columns">
      Info
    </div>
    </div>

Randy John over 3 years ago

Anybody else having an idea for my issue?