Navigation Bar

Let's spice things up with a navigation bar! Adding one is a piece of cake with Bootstrap. Just head on over to their website, visit the Examples section, and dive into the source code. Feel free to cherry-pick what you need for your project. Scroll down to find navbars. Inside the code, you'll discover a treasure trove of navigation bars. Let's snag the first one, shall we? It's got that neat collapsible menu we're looking for.

Let's make this super simple! Right-click and select View Page Source. Now, press 'Ctrl + F' (or 'Command + F' on Mac) and type in 'nav' to find the navbar. Look for the first instance of <nav> to </nav>. Once you've found it, just copy and paste it right at the top of the body of the base.html file.

The file's name in the example below doesn't correspond to the file's name in our project.

Let's give our server a quick refresh, and just like magic, the navbar is installed – it's as simple as snapping together Lego blocks. We've got a nifty collapsible menu in place. Sure, the text may not be quite right at the moment, but don't worry, we'll fix that. And, of course, we'll make sure those links are all pointing to the right pages.

So, let's go back into the code and do that now. If we go into here, we can see Never expand was this text here. Change this to the name of our site, Cookbook Craze, and then change the link to the root href="/".

What else do we need to change? So, the link Home is okay, but we have to change the link to the Home page.

Instead of Link, let's have Recipes and have this link to /recipes/.

Disabled, let's change to About. We don't have this page, but maybe we can add one a little bit later.

Let's refresh this and check the menu to see if it has changed. We have Home, we have a Recipes page, and when we click on Home, it takes us to the Home page, and when Recipes to the Recipes page. Perfect, And we have About and Dropdown here with other things. Let’s keep going.

In the Dropdown menu here, maybe we can add a Contact us. We can link to LinkedIn, YouTube, and link to Facebook. Very quickly, our links will be https://www.linkedin.com/ and pop in https://www.facebook.com/ and https://www.youtube.com/ URLs. Let's grab this URL, and now we have a fully-fledged contacts.

Go back to the browser and refresh this. We can see that changed Contact us and how all of these should be linked to the correct places. So now we have our navbar in our application.