Django Tutorial for Beginners 26 Navigation Menu

More intensive courses : http://grow-book.blogspot.com/
Abstract video content

alright guys so in this video what i would like to do is continue making our

navigation bar and what I was actually going to do is I'm just going to add

each item the bar as we need it but then I was like you know let's just go ahead

and design this entire thing and even though we don't have an album section or

song section will just make those dead links right now no just link them to the

proper sections whenever we make them so I figured as long as we're in here my

soldiers go ahead and design everything so i'm going to copy this and paste in

everything I need in re so we already know this is this is just bullsh rip and

this is just a link to our static file our CSS file now these other ones are

just really easy these are just external files kind of like bootstrap that I'm

included this one is just for the font you see this cursive font arm and that

is from google so if you go to Google Fonts go ahead and check out all the

fonts they're actually awesome and they're all free so you can use them on

your website and this one and this one these are just jquery and bootstraps

javascript file so bootstrap actually is not only a design framework actually

comes with some cool functionality and the reason that I including this is

because our menu just like this one is going to have a bunch of items album

songs this forum at album logout and a cool part about bootstrap is you can

actually set it up where if your website actually gets too small like this

actually works better in mine

so if we have a bunch of items in we're looking at this on a device that doesn't

have room to display all those items then instead it's just going to make a

little icon where you can click it in a menu appears with all the items on there

so usually that would be a pain in the butt to design writing all the

JavaScript for it but that's one cool thing about bootstrap it already comes

with that functionality so yeah that's what all those files are and also i'm

also going to change from navbar default to nav bar

inverse so if i refresh asst you guys can see it just pretty much just changes

the color to a dark theme rather than a light thing because if I just have

everything like other shade of light gray think I look a little bit weird

alright so navbar header so right now we just have our logo in there which looks

are right but we actually need to add one other thing to this and this is that

conditional button so again this is the button that's actually going to appear

if the device doesn't have room to display all of our items is going to

turn into a menu instead so let me just get that in all right so this button is

just going to be a type of button

who would've guessed in the class for this is actually navbar toggle and again

these classes are classes that we have to write ourselves these all came with

bootstrap if you want to know more about bootstrap I'm in another tutorial series

about it but there you go

so this data toggle is just collapse in the dead target

you're gonna set this equal to in this actually doesn't even matter this name

but- top nav bar so basically all of your items in here such as album songs

you're going to surround in a container and i just i'm going to name my

container top nav bar and that way it knows all right whenever you click this

button its supposed to talk with those are making visible or invisible

bootstrap stuff and now some weird thing about bootstrap he actually need to make

let me show you this

alright so you know in google chrome it has this little hamburger icon and has

three lines boom boom and also like an Android and i'm pretty sure i phone has

it to this bun with three lines for some reason to bootstrap you have to make

every line on that button visually haven't idea why they made it that way

but whatever

alright so the class is icon bar and i guess some people only wanted one line

on it so if you only want one line on it then just go ahead and do that by my

three lines on mine like a normal human being

so there you and I don't know if it'll even pop up now since we don't have any

items all right so check it out

so what we're doing is whenever screen it's too small it displays this button

and whenever we expand it has room for album that button disappears and later

on once we have items in our navigation menu whenever we click this it's going

to display those but we don't already so or not right now so that's why nothing

happens so that little section is taken care of

boom roasted in the changes to the header since it's not only logo anymore

and includes those buns so now right under this

our start making those individual items

alri

...