Welcome to the Treehouse Community
Looking to learn something new?
Would it be semantically correct to have 2 <nav> elements; the 1st, for the site logo & the 2nd for the list of links?
I guess what I really wanted to know is if the <nav> is used for any type of navigation (needed around any links on the page) or only for the list of links (on the top or side) of the page that direct to the other pages on the site. Thanks for any answer.
Austin Whipple29,712 Points
It's not technically incorrect to use the
nav element in both places like that. However, the W3C recommends its use for major navigation elements rather than all links on a page, so I would avoid using it for the logo alone since, while important, I wouldn't call it central or even highly critical site navigation. This stackoverflow thread has some additional helpful information.
Hey Chris - "nav" is really just a special "div" for the page navigation. It is best practice to use just one "nav" with other children elements. You do not have to use list items <li> inside them, that is just one good way to arrange the navigation elements.
Try doing what you envision a few different ways, try using different elements and applying different styles to get the look and behaviors you want. If you get lost, a good place to use for reference is w3schools.
I would be arranging things like this:
<div class="nav-wrap"> <div class="nav-wrap-inner"> <a class="logo-wrap"> <img class="logo" src="http://placehold.it/50x50"> </a> <nav class="main-nav"> <ul class="nav"> <li class="nav-item">Item 1</li> <li class="nav-item">Item 2</li> <li class="nav-item">Item 3</li> <li class="nav-item">Item 4</li> <li class="nav-item">Item 5</li> </ul> </nav> </div> </div>
As other guys have said, you only want one "nav" element on the page. I structure my navs as above with the inner wrapper because I use flexbox and this lets be display the outer div as block with and !important flag and then flexbox takes care of the rest inside that with ease :)
If you want me to set up a pen with plain css to get you going I will because a nav is something I pondered over for a long time not really knowing the best ways to do them especially when it comes to responsive and mobile dropdown enabled ones to :)