How would you should the main nav on desktop and then switch to off canvas on smaller screens?

Max Weir,

You would have to use media queries for that. See this Treehouse series for more in-depth explanation.

In short, using media queries, you can set conditional styles based on screen resolution. The simplest way would be to have two separate navigation elements in your HTML but only show the appropriate one based on screen size. So, you could effectively you would have CSS like this:

/* For desktop/default state */
nav.topbar {
  /* Your normal navigation styles here */
}

nav.offcanvas {
  /* Hide the off canvas navigation */
  display: none;
}


/* For smaller screens, here anything smaller than 720px but you could choose whatever width you want */
@media screen and (max-width: 720px) {

  /* Hide the topbar, show the off canvas nav */
  nav.topbar {
    display: none;
  }
  nav.offcanvas {
    display: block;
  }
}

Thanks Vishal, was thinking something along these lines. Ideally I'd like to use the same html in both cases but as of current foundation would need 2 versions of the nav like you mentioned.

You could also do it with the interchange features in Foundation 5. Load the navigation from another file as described here on treehouse. You can then use the normal small,medium,large syntax.