Category Navigation

Okay guys. So on this lesson, we're going to take a look at enabling some of the categories in our top nav. So right now, if you hover over any of these items, nothing happens. And we're missing that logo on the top nav. Now that I look at it. Let's jump into the layout and I want to go into our scripts.
So notice right away, we're missing out the global variable site URL. So it's trying to find the JavaScript, but it can't find it. So all we need to do is add in the curly siteUrl. Close it. Save this and boom. Now we should be able to see the dropdown coming from the webflow script.
Next we want to go into the nav bar, find that logo. So it's just missing the siteUrl. We do the same thing. It should show up now, there we go. So right here, you can see all the list items that are falling under the dropdown menu. So we don't need to have all of them. These are just static snippets. So let's go ahead and that our for-loop we're calling the variable genre, and we're going to search inside the craft categories.
Notice it's not entries anymore. We're using categories or notice we're not using section we're using group. Because categories have groups. So the handle, of course, it's movie genre, we verify that the categories handle is correct. So that looks good. And we go ahead and change some of the values inside the list item.
The title is genre.title and the link is genre.url. Let's go ahead and refresh that. And there we go, we have all the movie genres, nicely displayed in our navigation. Let's go ahead and repeat that same process for the game genres.
And just like that we have our game genres. Right? So now all we have to do is add in some of these simple URL tags to link out the top or the primary links, like the movies simply by adding the tag URL and then quotes whichever the page we want or the URI  we want to redirect the user. We could also transform any div wrapper into a "a href".
In this case, the movies dropped down link and we're turning that into a primary link. Same goes for the games when it changed that to the games primary URL. All right, once we have those links ready, we know that those links or those primary links are going to be redirecting us to the templates we already created.
And finally what we want to do is make sure that this whole entire snippet of the nav bar is in the include on itself. So we're turning it into a symbol. We're going to grab that paste it into a new  document and add it into our includes folder. I'm going to call it: _ navbar, go back to the layout and simply add in our include,
We want to do the same thing for the footer. So create a footer include. All right, and just to finalize, we want to make sure that we're constantly checking our tower for any updates or changes to our document, hopefully by now you have a good understanding of the includes and how to use them, where to use them.
On the next lesson we're going to take a look at the alternative to the include called embed.
All right guys, let's jump in.

‍