KreativePro Masterclass
Hello, {first_name}
4.6
Category Navigation
Learn to Build Websites with Craft Cms
Completed
Oops! Something went wrong while submitting the form.
Completed
Browse Lessons
38
lessons
4
hours
MINUTES
2
files
Level

Access our premium community including bonus tutorials, project files & weekly resources.

UNLIMITED ACCESS
Overview

Category Navigation

On this Craft Cms lesson you'll learn to fetch your categories as a navigation menu.

Reviews

Manases
Being the best means investing in the best, no matter what level you are at, this course will take you through the entire process you need to be able to implement an idea and turn it into a fully functional business.
Manasés Padilla
Photographer & Entrepreneur
Noel
It has been the best investment I made in my design journey so far. I would consider myself a novice but I honestly feel like I've gained a genuine professional insight into the process of creating a high-level website.
Noel Hale
Founder of Slush Monkeys®
Mae
I'm an early adopter of the KreativePro Masterclass, and I love how well put together it is. Neftali takes you through each step of the process from paper sketches to marketing all with fun visuals & clear instructions!
Mae Green
Product Designer @ Dropbox

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.

Coming Soon

Designers ultimate weapon of choice
38
lessons
4
hours
MINUTES
2
files
Level
Digital Media Masterclass by Neftali Loria

Neftali Loria

Author & Instructor
@kreativepro
KreativePro Masterclass Bundle

Access our premium community including bonus tutorials, project files & weekly resources.

UNLIMITED ACCCESS
SKILL UP & SAVE 75% OFF
00
Days
00
hrs
00
mins
00
secs
🚀