Menu icon Foundation
Looking to create magellan navbar with offcanvas menu options

I am trying to use Foundation to create a navbar that is stuck to the top (I believe called Magellan on here) but where there are menu options hidden off canvas. I have tried to use offcanvas and just style the tab-bar with a position fixed but when I click the menu button to show off canvas all the menu options are still at the top of the page that I have scrolled down. What do I do?

Also how do I get the aside to always take the full height of the page even if the info displayed is not that tall? Thanks!

off-canvasmenunavnavigation

I am trying to use Foundation to create a navbar that is stuck to the top (I believe called Magellan on here) but where there are menu options hidden off canvas. I have tried to use offcanvas and just style the tab-bar with a position fixed but when I click the menu button to show off canvas all the menu options are still at the top of the page that I have scrolled down. What do I do?

Also how do I get the aside to always take the full height of the page even if the info displayed is not that tall? Thanks!

Eric Warncke almost 6 years ago

Hey Harrison,

I'm not sure about the first question...I just posted a new thread with a similar problem. I'll let you know if I solve that tomorrow or the next day.

Your second question - You need to put your entire website inside < div class="off-canvas-wrap" > and
< div class="inner-wrap" >. Make sure the very last code before the end of your body is < a class="exit-off-canvas" > < /a > < /div > < /div >. Basically, you are telling it to close the off canvas at the very bottom of the site, then close your off-canvas-wrap and inner-wrap tags.

You can see the source code on any of the Zurb pages to see how they did it. They use Top-bar for their large screen navigation, then off-canvas for their mobile and touch version.

<div class="off-canvas-wrap">
  <div class="inner-wrap">

    <a class="left-off-canvas-toggle" >Menu</a> 

    <!-- Off Canvas Menu -->
    <aside class="left-off-canvas-menu">
        <!-- whatever you want goes here -->
        <ul>
          <li><a href="#">Item 1</a></li>
        </ul>
    </aside>

    <!-- main content goes here -->

  <a class="exit-off-canvas"></a>

  </div>
</div>

King Harrison almost 6 years ago

Thank you Eric for assistance. I am following that pattern currently but still having my issue. If the main content of my website does not extend to the bottom of the browser the aside does not extend to the bottom as well. That is where I am having some issues. I want the aside to always go to the bottom of the browser.

Eric Warncke almost 6 years ago

Can you paste your code or link to your development site? Also, are you mixing Foundation 4 parts in with Foundation 5? Are you sure everything is completely up to date?