Menu icon Foundation
Topbar nav full width of screen

Is there a tutorial or walkthrough for creating a navigation bar like: http://zurb.com/

On a desktop the navigation bar spans the width of the row. One a mobile there is a slider.

I'm using Foundation 5.

Thanks!

topbarfull widthnavnavigation

Is there a tutorial or walkthrough for creating a navigation bar like: http://zurb.com/

On a desktop the navigation bar spans the width of the row. One a mobile there is a slider.

I'm using Foundation 5.

Thanks!

Miko almost 6 years ago

Hi Dustin,

You can create the top navigation as per docs here:
http://foundation.zurb.com/docs/components/topbar.html

Then you can create the mobile off-canvas version as per docs here:
http://foundation.zurb.com/docs/components/offcanvas.html

Once you have created your main desktop navigation and off-canvas mobile navigation, you can use the visibility classed to hide and show the navigations according to your screen size.

For example you could add class="hide-for-small" to your desktop navigation and class="show-for-small" to your off-canvas navigation.

Take care,
M.

Dustin Pearce almost 6 years ago

Thanks Miko.

This was very helpful.

I am now having a problem with the mobile navigation not sliding out...

    <!-- start desktop navigation -->
    <div class="fixed contain-to-grid">
        <nav class="top-bar hide-for-small" data-topbar>
            <ul class="title-area">
                <li class="name">
                    <h1><a href"http://www.dustinpearce.com">Dustin Pearce</a></h1>
                </li>  
            </ul>

            <section class="top-bar-section">
                <!-- Right Nav Section -->
                <ul class="right">
                    <li class="divider"></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
        </nav>
    </div><!-- end desktop navigation -->

    <!-- start mobile navigation -->
    <div class="off-canvas-wrap">
        <div class="inner-wrap">
            <nav class="tab-bar show-for-small">
                <section class="left-small">
                    <a class="left-off-canvas-toggle menu-icon" ><span></span></a>
                </section>

                <section class="middle tab-bar-section">
                    <h1 class="title">Foundation</h1>
                </section>
            </nav>

            <aside class="left-off-canvas-menu">
                <ul class="off-canvas-list">
                    <li><label>Foundation</label></li>
                    <li><a href="#">The Psychohistorians</a></li>
                </ul>
            </aside>

            <section class="main-section">
            <!-- content goes here -->
            </section>

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

        </div>
    </div><!-- end mobile navigation -->

Miko almost 6 years ago

Try this.....

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation | Welcome</title>
    <link rel="stylesheet" href="css/foundation.css" />
    <script src="js/modernizr.js"></script>
  </head>
  <body>

   <!-- start desktop navigation -->
    <div class="contain-to-grid">
        <nav class="top-bar hide-for-small" data-topbar>
            <ul class="title-area">
                <li class="name">
                    <h1><a href"http://www.dustinpearce.com">Dustin Pearce</a></h1>
                </li>  
            </ul>

            <section class="top-bar-section">
                <!-- Right Nav Section -->
                <ul class="right">
                    <li class="divider"></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
        </nav>
    </div><!-- end desktop navigation -->

    <!-- start mobile navigation -->
    <div class="off-canvas-wrap">
        <div class="inner-wrap">
            <nav class="tab-bar show-for-small">
                <section class="left-small">
                    <a class="left-off-canvas-toggle menu-icon" ><span></span></a>
                </section>

                <section class="middle tab-bar-section">
                    <h1 class="title">Dustin Pearce</h1>
                </section>
            </nav>

            <aside class="left-off-canvas-menu">
                <ul class="off-canvas-list">
                    <li><label>Dustin Pearce</label></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </aside>

            <section class="main-section">


      <p>Proin fermentum arcu eget nibh blandit, at adipiscing nunc gravida. Mauris semper molestie est. Curabitur non bibendum dolor, a tempus nisl. Proin luctus malesuada metus, vitae auctor leo. Quisque imperdiet eu purus ut tempus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur id tristique purus. Nulla a eros et turpis scelerisque faucibus. Praesent fringilla eget velit eu placerat. Cras ut dignissim eros. Suspendisse at nisl cursus, accumsan mi id, scelerisque quam. Proin viverra scelerisque dapibus. Cras mattis nulla gravida porttitor fermentum.</p>


           <p>Proin fermentum arcu eget nibh blandit, at adipiscing nunc gravida. Mauris semper molestie est. Curabitur non bibendum dolor, a tempus nisl. Proin luctus malesuada metus, vitae auctor leo. Quisque imperdiet eu purus ut tempus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur id tristique purus. Nulla a eros et turpis scelerisque faucibus. Praesent fringilla eget velit eu placerat. Cras ut dignissim eros. Suspendisse at nisl cursus, accumsan mi id, scelerisque quam. Proin viverra scelerisque dapibus. Cras mattis nulla gravida porttitor fermentum.</p>


            </section>

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

        </div>
    </div><!-- end mobile navigation -->    
    <script src="js/jquery.js"></script>
    <script src="js/foundation.min.js"></script>
    <script>
      $(document).foundation();
    </script>
  </body>
</html>

Dustin Pearce almost 6 years ago

I didn't have Foundation 5 .js files linked at the bottom. Wah wah.

Miko almost 6 years ago

Glad is working :)