Django Tutorial for Beginners - 27 - Finishing the Navigation Menu Video Lecture | Django: The Ultimate Beginners Guide - Back-End Programming

alright guys so in this video what we're
going to do is we're going to finish
making our navigation bar we already
made a couple buttons on it and now I
just want to add that search form and
actually before I even do I want to go
ahead and add this so you see right
under this items comment this entire div
section inside this div are all of the
individual items all the buttons the
forms whatever so you actually want to
add the ID and set this equal to
whatever this is top navbar so this is
all bootstrap so we don't have to write
any of this by hand but basically what
happens is we say hey you know whenever
you need to display this button because
you don't have room for all of these
items woah look at top navbar that's
your target and these are the items that
you want to be collapsing so basically
anything in inside here is going to be
hidden I guess that's the easy way to
look at it let me separate these a
little bit all right so let me just go
ahead and make this form real quick and
again this form isn't going to work
right now because we didn't build any
search functionality but I just want to
make it display and look pretty so
anytime you add a form to straight
navbar form and I just want to make it
float to the left so navbar left and
after this this is can you type Bucky
this is going to be for searching and
the method is going to be equal to get
and action we don't have any for that
yet so we'll just make it a dead link
and all right so just basic stuff we'll
plug all of these things in later as we
need them so now I want to add that
input first so I actually want to
surround it with div or form group and
this is just for styling mostly and now
my input which is the area that user
types text into is type
text class form control the name equals
Q so later on whatever they type in we
need to basically save it to a variable
you can name it query I'm just going to
name my queue because that's kind of the
standard whenever people build searches
and the value is whatever it's equal to
and we won't have to set this right now
so basically whenever we pop open the
form it's not going to have any text in
it but we'll do something cool with that
later so alright mate looking good now
let me just go ahead and make that last
button so this is going to be the button
they press the actually search or submit
the form so it's going to be a submit
button
and now let me just style it so it looks
pretty so it's going to be button now
just make it a default button in other
words the default colors and on the
button I'll just have it say search now
we're getting a little issue that says
hey you need a label or title but we
aren't worried about that right now and
now we just need to have an verify that
that works all right so now we just need
to have those buttons off to the right
and we can copy a pace like 99% of this
so it's going to be easy so right nav
nav bar nav and one other class we need
to add in order to make sure that these
get displayed on the right-hand side of
the navigation bar is nav bar right all
right so now inside here we just add
items like usual so the first thing I
want to add is I figure out what it was
even add add album I think
I think it was ad album in logout I add
and logout alright so for ad album the
icon for this I just use plus which is a
plus sign and for logout i actually just
write and off which is basically like a
power button so let me refresh this and
check it out alright so we have well we
need to make this cursive and I'll do
that in just a second but we have this
button which is active and you always
want one button active at a time and
that's just an indicator for the user to
know hey I'm on this section songs we
have our forum at album and logout and
just to verify whenever we minimize this
look what happens it turns into an
hamburger icon and if I click this all
of my items appear and we may want to
hide this search button and just make it
so whenever the user hits enter it
searches but not really worried about
that right now to be honest so a couple
things I want to do just to put some
final touches on this this is vibrant
logo I actually want to make cursive and
we already imported the font for that
from Google and I don't know if you guys
can see it but the default of this
navigation bar is to have slightly
curved edges and I think it looks really
stupid so again they're only curved by
like a three pixel border radius but I
just want to make sure it's completely
flat so show you guys how to override
those now it's important to note this
right here is the default bootstrap
style now what we want to do is we want
to make some tweaks so whenever we
include our CSS file we need to put
after it if we put the bootstrap file
after this line right here then all of
the bootstrap code would overwrite our
Styles so again what you always want to
do is you want to import this first and
then whenever you want to make a tweak
you put it under it so now we can go
into our static styles that CSS
so for the navbar just want to set the
border radius to zero and that's going
to make it square edges instead of curvy
ones and now for the logo which is the
navbar brand what I'm going to do here
is just change the font family now
knocked over my mouse I have a big
vertical mouse if you don't know what
that is google it for I was starting to
have like carpal tunnel symptoms but uh
yeah so I have a big honkin thunking
mouse and it's kind of weird to use but
I just knocked it over alright so the
font family for this is just satisfied
and then we need backup one so we'll
just write cursive so if for some reason
these are camel it satisfy then we'll
just give them cursive by default so
hopefully everything looks good to go
and now noice meso I got nice square
borders around my entire navbar and look
at that viber in what it was that
satisfy font whatever it is it's
beautiful so there you go that's the
basics of our navigation bar we're now
ready to move on