Menu icon Foundation

My Posts




My Comments

Randy John commented on Randy John's post over 3 years

Anybody having a further idea for that last step of making it sticky?

Randy John commented on Randy John's post over 3 years

Here's my current code:
```HTML

<div class="title-bar" data-responsive-toggle="menu" data-hide-for="medium">
    <div class="mobile-nav">
        <button class="menu-icon" data-toggle></button>
    </div>
</div>
<div class="top-bar" id="menu">
    <div class="top-bar-left">
    <ul class="vertical medium-horizontal menu" data-responsive-menu="accordion medium-dropdown">
            <li class="menu-text">Site Title</li>
            <li class="has-submenu">
                <a href="#">One</a>
                <ul class="vertical menu">
                    <li><a href="#">One</a></li>
                    <li><a href="#">Two</a></li>
                    <li><a href="#">Three</a></li>
                </ul>
            </li>
            <li><a href="#">Two</a></li>
            <li><a href="#">Three</a></li>
        </ul>
    </div>
    <div class="top-bar-right hide-for-small">
        <ul class="menu">
            <li><input type="search" placeholder="Search"></li>
            <li><button type="button" class="button">Search</button></li>
        </ul>
    </div>
</div>

```
Still wondering how I get that one sticky as I that would be the last step. :(

Randy John commented on Randy John's post over 3 years

Sorry - was pretty busy last days. - http://www.sparfranken.de/test/

Actually now it looks almost correct, except of the sticky function. :) So expectation is, that if scrolling down, the menu stays on the page. But actually it does not stay on the page. What can I do now?

Randy John commented on Randy John's post over 3 years

Thanks for the great support - put the version online: http://www.sparfranken.de/test/

Randy John commented on Randy John's post over 3 years

Sorry - again two topics I found:

  1. The fixed destroys the sticky-option of the menu.
  2. In Desktop-mode the dropdown is suddenly horizontal instead of vertical. Why? In accordion it should be vertical, but in desktop horizontal.

Any further ideas?

Randy John commented on Randy John's post over 3 years

Accordion on small screens, standard topbar for big screens - yes.

Randy John commented on Randy John's post over 3 years

Not really :(
Here a screenshot of the accordion: http://www.directupload.net/file/d/4272/29ie5tf7_png.htm

So the accordion is hidden by the content, as well there is still the move-over effekt from the standard menu available.

These are typical issues I'm struggeling with that menu topic here.... :) Any further ideas?

Randy John commented on Randy John's post over 3 years

Anybody else having an idea for my issue?

Randy John commented on Randy John's post over 3 years

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 commented on Randy John's post over 3 years

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>

Posts Followed

No Content

Following

    No Content

Followers

My Posts



My Comments

You commented on Randy John's post over 3 years

Anybody having a further idea for that last step of making it sticky?

You commented on Randy John's post over 3 years

Here's my current code:
```HTML

<div class="title-bar" data-responsive-toggle="menu" data-hide-for="medium">
    <div class="mobile-nav">
        <button class="menu-icon" data-toggle></button>
    </div>
</div>
<div class="top-bar" id="menu">
    <div class="top-bar-left">
    <ul class="vertical medium-horizontal menu" data-responsive-menu="accordion medium-dropdown">
            <li class="menu-text">Site Title</li>
            <li class="has-submenu">
                <a href="#">One</a>
                <ul class="vertical menu">
                    <li><a href="#">One</a></li>
                    <li><a href="#">Two</a></li>
                    <li><a href="#">Three</a></li>
                </ul>
            </li>
            <li><a href="#">Two</a></li>
            <li><a href="#">Three</a></li>
        </ul>
    </div>
    <div class="top-bar-right hide-for-small">
        <ul class="menu">
            <li><input type="search" placeholder="Search"></li>
            <li><button type="button" class="button">Search</button></li>
        </ul>
    </div>
</div>

```
Still wondering how I get that one sticky as I that would be the last step. :(

You commented on Randy John's post over 3 years

Sorry - was pretty busy last days. - http://www.sparfranken.de/test/

Actually now it looks almost correct, except of the sticky function. :) So expectation is, that if scrolling down, the menu stays on the page. But actually it does not stay on the page. What can I do now?

You commented on Randy John's post over 3 years

Thanks for the great support - put the version online: http://www.sparfranken.de/test/

You commented on Randy John's post over 3 years

Sorry - again two topics I found:

  1. The fixed destroys the sticky-option of the menu.
  2. In Desktop-mode the dropdown is suddenly horizontal instead of vertical. Why? In accordion it should be vertical, but in desktop horizontal.

Any further ideas?

You commented on Randy John's post over 3 years

Accordion on small screens, standard topbar for big screens - yes.

You commented on Randy John's post over 3 years

Not really :(
Here a screenshot of the accordion: http://www.directupload.net/file/d/4272/29ie5tf7_png.htm

So the accordion is hidden by the content, as well there is still the move-over effekt from the standard menu available.

These are typical issues I'm struggeling with that menu topic here.... :) Any further ideas?

You commented on Randy John's post over 3 years

Anybody else having an idea for my issue?

You commented on Randy John's post over 3 years

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>

You commented on Randy John's post over 3 years

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>

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content