Menu icon Foundation
Responsive top navigation menu

Hi,

I find it hard in F6 to get top navigation menu templates/designs.  The default ones listed in the Kitchen Sink and Resources/Docs are not that good.  Can you point me to the right links?

I need a top navigation menu where I can add the usual logo on the left, then list of menu links on right.  Then when resized to mobile would perform just like the regular sub-navigation links.   I would also need if possible to use "mega menus'.

I'm okay with F6 Top Bar but I don't like the mobile layout of sub-menus.  See below, I wanted the layout on the right: 

Help please with top navigation menu designs and styles.

Thanks,

worldrom

f6 top navigation menumega menu

Hi,

I find it hard in F6 to get top navigation menu templates/designs.  The default ones listed in the Kitchen Sink and Resources/Docs are not that good.  Can you point me to the right links?

I need a top navigation menu where I can add the usual logo on the left, then list of menu links on right.  Then when resized to mobile would perform just like the regular sub-navigation links.   I would also need if possible to use "mega menus'.

I'm okay with F6 Top Bar but I don't like the mobile layout of sub-menus.  See below, I wanted the layout on the right: 

Help please with top navigation menu designs and styles.

Thanks,

worldrom

Ryan McCready almost 3 years ago

Hey there is a responsive navigation version: http://foundation.zurb.com/sites/docs/responsive-navigation.html#responsive-menu

Also there is a building block you might find helpful: http://zurb.com/building-blocks/f6-top-bar

worldrom almost 3 years ago

Thanks Ryan,

I used the Top Nav responsive.  And here it is:

In mobile view, the links are horizontal and not vertical.  As you can see, my links ex. Home, About Us, Products etc. are in one line and the 4th link "Gallery" can't be seen anymore.  I wanted it like a regular vertical navigation menu on mobile view. 

What's the trick? Thanks

worldrom almost 3 years ago

Any other suggestions re top bar and responsive navigation?

Ryan McCready almost 3 years ago

 Hey,

Seems like some classes are still missing. I could help more if you share your code :) You can post it here if you'd like: http://codepen.io/rafibomb/pen/ZpPOWL

worldrom almost 3 years ago

<!doctype html>
<html class="no-js" lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foundation Template</title>
    <link rel="stylesheet" href="css/foundation.css">
    <link rel="stylesheet" href="css/app.css">
  </head>
  <body>
<div style="background-color:#e6e6e6">
<div class="row">
<div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
  <button class="menu-icon" type="button" data-toggle></button>
  <div class="title-bar-title">COMPANY LOGO</div>
</div>

<div class="top-bar" id="example-menu">
  <div class="top-bar-left">
    <ul class="dropdown menu" data-dropdown-menu>
      <li class="menu-text"><img src="http://www.teknikabuilders.com/img/logo1.jpg"></li>
    </ul>  
  </div>
  <div class="top-bar-right">
    <ul class="dropdown menu" data-dropdown-menu>
      <li><a href="#">HOME</a></li>
      <li>
        <a href="#">ABOUT US</a>
        <ul class="menu vertical">
          <li><a href="#">One</a></li>
          <li><a href="#">Two</a></li>
          <li><a href="#">Three</a></li>
        </ul>
      </li>
      <li><a href="#">PRODUCTS &amp; SERVICES</a></li>
      <li><a href="#">CONTACT US</a></li>
    </ul>
  </div>
</div>
</div>
</div>


    <div class="row">
      <div class="large-12 columns">
        <h1>Welcome to Foundation</h1>
      </div>
    </div>

    <div class="row">
      <div class="large-12 columns">
        <div class="callout">
          <h3>We&rsquo;re stoked you want to try Foundation! </h3>
          <p>To get going, this file (index.html) includes some basic styles you can modify, play around with, or totally destroy to get going.</p>
          <p>Once you've exhausted the fun in this document, you should check out:</p>
          <div class="row">
            <div class="large-4 medium-4 columns">
              <p><a href="http://foundation.zurb.com/docs">Foundation Documentation</a><br />Everything you need to know about using the framework.</p>
            </div>
            <div class="large-4 medium-4 columns">
              <p><a href="http://zurb.com/university/code-skills">Foundation Code Skills</a><br />These online courses offer you a chance to better understand how Foundation works and how you can master it to create awesome projects.</p>
            </div>
            <div class="large-4 medium-4 columns">
              <p><a href="http://foundation.zurb.com/forum">Foundation Forum</a><br />Join the Foundation community to ask a question or show off your knowlege.</p>
            </div>
          </div>
          <div class="row">
            <div class="large-4 medium-4 medium-push-2 columns">
              <p><a href="http://github.com/zurb/foundation">Foundation on Github</a><br />Latest code, issue reports, feature requests and more.</p>
            </div>
            <div class="large-4 medium-4 medium-pull-2 columns">
              <p><a href="https://twitter.com/ZURBfoundation">@zurbfoundation</a><br />Ping us on Twitter if you have questions. When you build something with this we'd love to see it (and send you a totally boss sticker).</p>
            </div>
          </div>
        </div>
      </div>
    </div>



    <script src="js/vendor/jquery.js"></script>
    <script src="js/vendor/what-input.js"></script>
    <script src="js/vendor/foundation.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>

worldrom almost 3 years ago

Hi Ryan,

Sorry couldn't figure out how to use Code Pen :-) Anyway, I posted my html code above.  When you have the time, hope you can help.  Thanks! 

See also my screenshots above.

Thanks,

Rom

Ryan McCready almost 3 years ago

Hey Rom,

It looks like in your example you're not using responsive navigation, here's an example with the responsive navigation added: http://codepen.io/RyanM2088/pen/xEZzYw

This is actually something we teach in our Intro to Foundation class. You might want to check it out :) http://zurb.com/university/foundation-intro