Navigating the nav element

The nav element can be tough nut to crack because it can be used in so many ways. We often want it to be invisible on narrow screens, but appear on larger ones. Some sites don't need one at all, while others like to place breadcrumbs or secondary navigation in this spot. On some layouts, it can morph between a horizontal and vertical alignment. Phew!

What's the trouble with it?

How we use the nav element depends heavily on our site's design. There are many possible use cases: show breadcrumbs, a navigation element, show just a few links, show a search bar, entirely up to you. The issue with nav is that what works on one screensize may not work well with another. That is why it's recommended you simply hide it on screens where you feel it doesn't make sense; then you can replace it with a separate element that is more friendly to your particular design. The nav element/class isn't required, so whatever layout you use it should work fine without it.

Consistency

Be careful to be as consistent as you can in your treatment, so that if your site uses multiple different layouts, your users can easily grasp their similarities.

Rendering different containers on different screensizes

Another possible approach is displaying entirely different experiences in the nav on different screensizes. Mileage here may vary, because it can be difficult to fit a good experience into the nav on narrow screens without the element growing very tall. You don't want too much between the user and the most important thing on the page. The meat and potatoes! The content!