Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Nicola Sansom
Nicola Sansom
1,306 Points

Best way to create navigation using zurb foundation

Hello

I am very new to zurb foundation but looking to create a responsive menu that looks like these mockups but I am not sure how to go about it. For example would it be best to have two different divs one for the desktop nav and one for the mobile nav and one of them appears depending on the width of the screen.

Desktop Nav - http://postimg.org/image/muciywxzf/

Mobile Nav - http://postimg.org/image/g8okxdykd/

5 Answers

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

Or use the Responsive Toggle plugin, that looks like it would achieve what you're looking for.

Nattapol Kamolbal
Nattapol Kamolbal
15,528 Points
Nattapol Kamolbal
Nattapol Kamolbal
15,528 Points

Wow. Just know that I can do this in Foundation 6. (I still used 5.)

Mark your answer as better one.

Nattapol Kamolbal
Nattapol Kamolbal
15,528 Points
Nattapol Kamolbal
Nattapol Kamolbal
15,528 Points

From your example, I think you should use top bar combined with off-canvas menu.

  1. Put the off-canvas trigger button in top bar.
  2. Add visibility class like "show-for-small" to the trigger button to only show the button on mobile device.
  3. Add visibility class like "hide-for-small" to the menu ul (or div) to hide the long menu on mobile device
Nicola Sansom
Nicola Sansom
1,306 Points
Nicola Sansom
Nicola Sansom
1,306 Points

Hi so I ended up going with topbar / menu toggle for smaller screens solution however I am running into some problems cannot figure out how to do the following:

Add a underline effect on the active page and a hover effect on each nav element(as shown in the first screenshot) Editing the dropdown arrows on nav dropdown menu, it is currently pointed right when I would like it to go down.

Does anyone know how to do this?

I am currently using SASS with foundation 6

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

Can you please paste in your HTML and any custom CSS code? Wrap them in a code block by adding three backticks on their own line before and after the code, with the language or filename after the top set like so:

    [blank line]
    ```index.html
    <html>
      <head>...</head>
      <body>...</body>
    </html>
    ```
    [blank line]
    ```css
    body { ... }
    .my-class { ... }
    ```
    [blank line]

The blank lines on the outside of the code blocks are important.

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

As for the underline on the active page, you'd need to add a class to the active page, which would either be set manually if using static HTML files (only add the class to the 'Home' link in the HTML for the Home page, etc.) or using some logic on the server side (or in JavaScript for a single-page application).

You can't do it in CSS alone, since it won't know what page it is being used on.

Nicola Sansom
Nicola Sansom
1,306 Points
Nicola Sansom
Nicola Sansom
1,306 Points

I have made some progress with the navigation and figured out how to get the hover and active states working however I am having a new issue now. The problem is the class hide-for-small does not to seem to be working for me. 

    <div class="row">
    <div class="logo large-3 columns">
      <ul class="menu">
        <li class="menu-text"><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></li>
      </ul>
    </div>

    <div class="large-9 columns">
        <div class="row hide-for-small">
        <div class="large-2 columns no-padding smaller-font ">
          Weather Area
        </div>
        <div class="large-2 columns no-padding"> 018803 294110</div>
        <div class="large-5 columns smaller-font no-padding">STAY@GROSVENORHOUSEHOTEL.CO.UK</div>
        <div class="large-3 columns no-padding">
        <a href="#" class="main-button small">Default Button</a>
        </div>
        </div>
        <div class="row">

        <div class="large-12 header_info">
          <header class="no-padding top-bar-item" role="banner">
             <!-- This navs will be applied to the topbar, above all content
                To see additional nav styles, visit the /parts directory -->
             <?php get_template_part( 'parts/nav', 'topbar' ); ?>
          </header> <!-- end .header -->
    </div>
  </div>
</div>
</div>

Screenshot: http://postimg.org/image/efb5dack1/

Nicola Sansom
Nicola Sansom
1,306 Points
Nicola Sansom
Nicola Sansom
1,306 Points

Thanks that worked :)

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

Great! If your original question was solved by my answer, please mark it as 'Best Answer' so others know your question has been resolved.

Happy coding! :)