Menu icon Foundation

My Posts

  • 1
    Reply
  • Nesting offcanvas menus

    By sushrut bidwai

    offcanvasmenu

    I am new to foundation and here is what I am trying to accomplish. I have a top bar with (left) off canvas menu and which wraps entire page. I have sticky sub navigation bar which is show only for small screens. Using jquery plugin stickUp.js. Now I... (continued)

    Last Reply by sushrut bidwai over 5 years ago


My Comments

sushrut bidwai commented on sushrut bidwai's post over 5 years

Actually was able to resolve this.

Solution -

  1. Dont need multiple offcanvas wrappers and exit-off-canvas divs.
  2. Place toggle buttons wherever, does not matter.

So simplified code looks like -

<div class="off-canvas-wrapper">
    <div class="inner-wrapper">
        <a class="left-off-canvas-toggle menu-icon"></a>
    <aside class="left-off-canvas-menu"><!-- menu --></aside>
    <aside class="right-off-canvas-menu"><!-- menu --></aside>
    <div class-"sticky-nav">
               <a class="right-off-canvas-toggle menu-icon"></a>
    </div>
    <div><!-- page content--></div>
    <a class="exit-off-canvas"></a>
</div></div> <!-- closing outer wrappers -->

Thank you for an awesome tool.

Note to self - think more before asking the internet.

Posts Followed

  • 1
    Reply
  • Nesting offcanvas menus

    By sushrut bidwai

    offcanvasmenu

    I am new to foundation and here is what I am trying to accomplish. I have a top bar with (left) off canvas menu and which wraps entire page. I have sticky sub navigation bar which is show only for small screens. Using jquery plugin stickUp.js. Now I... (continued)

    Last Reply by sushrut bidwai over 5 years ago


Following

    No Content

Followers

My Posts


My Comments

You commented on sushrut bidwai's post over 5 years

Actually was able to resolve this.

Solution -

  1. Dont need multiple offcanvas wrappers and exit-off-canvas divs.
  2. Place toggle buttons wherever, does not matter.

So simplified code looks like -

<div class="off-canvas-wrapper">
    <div class="inner-wrapper">
        <a class="left-off-canvas-toggle menu-icon"></a>
    <aside class="left-off-canvas-menu"><!-- menu --></aside>
    <aside class="right-off-canvas-menu"><!-- menu --></aside>
    <div class-"sticky-nav">
               <a class="right-off-canvas-toggle menu-icon"></a>
    </div>
    <div><!-- page content--></div>
    <a class="exit-off-canvas"></a>
</div></div> <!-- closing outer wrappers -->

Thank you for an awesome tool.

Note to self - think more before asking the internet.

Posts Followed


Following

  • No Content

Followers

  • No Content