- 00:00:02 welcome to this video great to have you
- 00:00:04 on board in this video we'll add a
- 00:00:06 navigation bar to our page so that we
- 00:00:09 can get started building a real page and
- 00:00:11 what better way to get started than by
- 00:00:14 adding a responsive navigation bar of
- 00:00:17 course using bootstrap for
- 00:00:21 so I'm back in the project as I left it
- 00:00:24 at the end of the last video and there
- 00:00:26 we just played around with the grid
- 00:00:28 so therefore what I can do here is I can
- 00:00:31 get rid of all these style assignments
- 00:00:33 in the head section and actually get rid
- 00:00:35 of the entire body content because that
- 00:00:38 was just the dummy grid I'll now also
- 00:00:40 add a main dot CSS file which I'll used
- 00:00:43 to store my CSS code for the future and
- 00:00:46 I'll import it with a link element in
- 00:00:49 the index.html file pointing to main dot
- 00:00:52 CSS okay so this is how I wanna work
- 00:00:56 with CSS now I don't actually to write
- 00:00:59 that much CSS code though in this video
- 00:01:02 my goal is to add a navbar now since we
- 00:01:04 cleaned up that body content our web
- 00:01:07 page if we reload it essentially looks
- 00:01:09 like this so let's add a navigation bar
- 00:01:12 now by adding a nav element now this is
- 00:01:16 the default HTML nav element and here's
- 00:01:19 one important thing just as in all the
- 00:01:21 other cases bootstrap pretty much only
- 00:01:24 works with CSS classes it doesn't
- 00:01:27 automatically turn this into a nicely
- 00:01:30 styled bootstrap navigation bar because
- 00:01:33 there might be cases where you want to
- 00:01:34 use that element without getting the
- 00:01:36 bootstrap navigation bar hence to turn
- 00:01:39 this into your navigation bar controlled
- 00:01:41 and start by bootstrap I have to add a
- 00:01:44 class the navbar class like this now if
- 00:01:48 we save that and we reload the page we
- 00:01:53 still don't really see that much do we
- 00:01:54 well the reason for this is of course we
- 00:01:57 need to add some content so inside of
- 00:02:00 that navbar why don't we add an anchor
- 00:02:04 tag which leads nowhere in our case well
- 00:02:07 we have our brand let's say so in my
- 00:02:10 case a catamite and this could also be
- 00:02:12 an image now I will give this anchor tag
- 00:02:15 a special class and that class should be
- 00:02:17 navbar – brand which will make sure that
- 00:02:22 this is stalled and positioned in a nice
- 00:02:23 way in the top left corner of the
- 00:02:26 navigation bar which is where you
- 00:02:27 typically have your clickable brand
- 00:02:29 which leads you back to your home page
- 00:02:31 on most pages if we add this and we
- 00:02:34 reload
- 00:02:35 we see that brand here but I don't
- 00:02:38 really see a navigation bar do you well
- 00:02:41 we need to add more classes to the nav
- 00:02:44 element there we should also add nav bar
- 00:02:48 light to set the theme and BG alight for
- 00:02:51 the background theme if we add that and
- 00:02:54 we reload now the Sun we got a nice grey
- 00:02:57 nav bar spanning the full width of the
- 00:03:00 page and you see the brand style all the
- 00:03:03 was adjusted it's still clickable but it
- 00:03:06 looks less like a link which is of
- 00:03:08 course what we want so this is now our
- 00:03:12 better-looking nav bar now you want to
- 00:03:15 have more than just a brand in the nav
- 00:03:17 bar you want to have some clickable
- 00:03:18 items so for dad what we can do is we
- 00:03:22 can add an unordered list in that nav
- 00:03:25 bar and give that unordered list a class
- 00:03:28 of nav bar – Neff to indicate that this
- 00:03:31 holds our actual menu items there we can
- 00:03:36 add a menu item by adding a list item of
- 00:03:38 course with a link inside of it
- 00:03:40 maybe our users page and that list item
- 00:03:44 and turn also receives a class didn't
- 00:03:47 have – item class now we can also give
- 00:03:51 that link a class and that will be the
- 00:03:54 nav link class so this is the structure
- 00:03:57 we typically set up for navigation items
- 00:03:59 or for menu items in the navigation bar
- 00:04:02 we have the nav bar nav wrapper around
- 00:04:05 all the list items then the individual
- 00:04:08 list item and in that list item we
- 00:04:10 typically got a link which then also
- 00:04:12 should get in F link class here now if
- 00:04:16 we do that and we save this if we reload
- 00:04:18 the page we can see the link here nicely
- 00:04:21 positioned on the right side of the
- 00:04:24 navigation bar so this is automatically
- 00:04:26 done for you by bootstrap now you can
- 00:04:29 change the positioning by going to that
- 00:04:32 unordered list with the class Neff porn
- 00:04:35 F and adding M R Auto margin-right:auto
- 00:04:38 if you do that it'll actually be
- 00:04:41 positioned on the Left instead of on the
- 00:04:43 right since bootstrap uses flexbox this
- 00:04:47 automatically leads to that position
- 00:04:49 we can inspect this if we have a look at
- 00:04:51 this unordered list you see that with
- 00:04:53 margin right set to auto it actually
- 00:04:56 fills up all the entire space with this
- 00:04:58 wealth margin to the right and hence
- 00:05:00 this unordered list with all its list
- 00:05:03 items is pushed all the way to the left
- 00:05:05 if you remove that rule which you do by
- 00:05:08 removing mmm our auto it actually is
- 00:05:10 positioned across the entire navbar
- 00:05:13 because dad on the other hand is just
- 00:05:15 how the navbar works it uses display
- 00:05:17 flex and then it also positions its
- 00:05:20 elements with space between so mr Auto
- 00:05:24 is a nice way of moving the elements to
- 00:05:27 the left if you want that I will remove
- 00:05:29 that though because I don't want that
- 00:05:31 behavior I want to have this space in
- 00:05:33 between and with that let's dive deeper
- 00:05:35 let's add more or less items for example
- 00:05:38 we can add a second list item which
- 00:05:41 could be products something like that if
- 00:05:45 we now say if this hmm
- 00:05:47 this actually adds a new line instead of
- 00:05:51 adding this next to the our list item
- 00:05:53 now why is that the response can be
- 00:05:56 found if we inspect the unordered list
- 00:05:59 with the navbar nav class there we see
- 00:06:02 that the Flex Direction is actually set
- 00:06:05 to call him instead of Road now this is
- 00:06:08 not a balk this is on purpose because
- 00:06:09 bootstrap four is built in a
- 00:06:11 mobile-first way now because of that
- 00:06:14 mobile-first approach we can also build
- 00:06:16 our navigation bar in a mobile-first way
- 00:06:18 we do that by adding a div with the
- 00:06:21 class collapse nav bar – collapse and
- 00:06:28 this route if will actually wrap this
- 00:06:32 unordered list now with that if we save
- 00:06:34 dad and we reload this is gone we don't
- 00:06:37 see the nav items anymore this is
- 00:06:40 because we now need to tell bootstrap
- 00:06:42 how long or from which point on we
- 00:06:45 actually want to render our menu items
- 00:06:48 in the nav bar instead of in a toggle
- 00:06:52 drop-down menu so to say we do this by
- 00:06:55 adding a nav bar – expand class to the
- 00:06:58 nav element and then you set a break
- 00:07:01 point of finding from which
- 00:07:03 point on shoot elements be added to the
- 00:07:05 navbar this could be LG to only add them
- 00:07:08 on big screens for example with that if
- 00:07:10 you reload if you increase the size you
- 00:07:13 add them on bigger screens and now you
- 00:07:15 see they are also added on the left here
- 00:07:18 instead of on the right now this just
- 00:07:20 happens to be the default you can go to
- 00:07:22 nap or Neph and where we used em our
- 00:07:24 audio previously to push it to the to
- 00:07:29 the left we can now use ml order to add
- 00:07:31 some margin to the left automatically to
- 00:07:34 the list items to move them back to the
- 00:07:36 right if we want a dead behavior so I
- 00:07:39 will go back to the very default though
- 00:07:42 so that you can also recognize this code
- 00:07:44 in the official documentation if you
- 00:07:46 look it up there and so now we're back
- 00:07:49 to a navigation bar where items are
- 00:07:51 removed once we go below a certain size
- 00:07:54 and of course we can change that
- 00:07:56 breakpoint we could set it to SM for
- 00:07:58 example and now the menu items will be
- 00:08:01 there much longer
- 00:08:02 they will only disappear on small
- 00:08:03 devices now the question of course is
- 00:08:05 how do we bring them back for small
- 00:08:08 devices then they disappear because
- 00:08:10 maybe we're running out of space in the
- 00:08:12 navigation bar but where do we then
- 00:08:14 display them well in some extra menu
- 00:08:17 which can be toggled the problem chest
- 00:08:19 is we got no toggle button well we can
- 00:08:22 add this to with the nav bar boots Tripp
- 00:08:25 offers us to add such a toggle button we
- 00:08:28 can add it here after the friend
- 00:08:30 you could also in front of it add a
- 00:08:32 button and give it a class of navbar
- 00:08:37 toggler because that is what this button
- 00:08:39 will do in the end now on this button
- 00:08:42 you don't write anything but in there
- 00:08:45 you simply add a span which in turn
- 00:08:47 should get a class of navbar toggler
- 00:08:50 icon this will give you the hamburger
- 00:08:52 menu in the end now if we save that and
- 00:08:56 we reload now we get that toggle button
- 00:08:59 here and for bigger screens if we
- 00:09:01 increase that this will be removed and
- 00:09:03 we get the menu items instead that's
- 00:09:05 cool but clicking a button doesn't do
- 00:09:07 anything this has two reasons the first
- 00:09:10 reason is that we need to add something
- 00:09:12 to that button to make it work and that
- 00:09:14 is the data
- 00:09:16 – toggle property or attribute I should
- 00:09:20 say which we set to collapse now this
- 00:09:22 will be used by bootstraps JavaScript
- 00:09:24 package it will automatically listen to
- 00:09:26 clicks on a button then and it will open
- 00:09:28 the menu for us and close it if it's
- 00:09:31 open all of that done automatically the
- 00:09:35 problem is even with that change if we
- 00:09:38 reload nothing happens the reason for
- 00:09:40 that is very simple though we haven't
- 00:09:42 included the bootstrap script packages
- 00:09:44 so let's head over to get bootstrap comm
- 00:09:47 and click on get started and previously
- 00:09:49 I only fetch the CSS portion let's now
- 00:09:52 also fetch these free scripts that
- 00:09:54 includes jQuery yeah bootstrap still
- 00:09:57 uses jQuery on which it builds up
- 00:10:00 however in a very slim version so it's
- 00:10:02 probably fine for that and now we're a
- 00:10:04 helper library and the bootstrap
- 00:10:06 JavaScript code itself which in the end
- 00:10:08 will do that click listening I was
- 00:10:10 talking about we can put that code at
- 00:10:13 the end of our body section to load it
- 00:10:16 last and with that if we now reload the
- 00:10:19 page we can click that button and still
- 00:10:22 don't see anything well there's one more
- 00:10:25 missing piece we added that data toggle
- 00:10:28 which is great this will actually lead
- 00:10:30 to a listener being set up but we also
- 00:10:32 need to define a data – target attribute
- 00:10:36 which points at the element the menu we
- 00:10:40 want a toggle because there is something
- 00:10:42 you can configure there you choose a CSS
- 00:10:46 selector recommended is using an ID for
- 00:10:49 example the nav bar menu the name is
- 00:10:53 totally up to you the important thing is
- 00:10:55 you now just need to assign this as an
- 00:10:58 ID to your collapsible menu and with
- 00:11:01 that I'm referring to that diff which
- 00:11:03 wraps the menu so this div now receives
- 00:11:06 an ID which has to fit that data target
- 00:11:09 you to find up here navbar menu in my
- 00:11:11 case here and with that added we can
- 00:11:14 save this and now if we reload the page
- 00:11:17 we can indeed toggle our menu here this
- 00:11:21 is how we can add a very basic navbar
- 00:11:23 now below the video you'll find a link
- 00:11:25 to the official talks where you can dive
- 00:11:27 much deeper and also learn how you
- 00:11:29 can include a search bar into your naff
- 00:11:31 and so on one thing that I want to show
- 00:11:34 you right away is how you can set
- 00:11:36 different schemes color schemes for this
- 00:11:39 navbar right now we're using the light
- 00:11:42 scheme here with nav bar light and BG
- 00:11:44 light and we can change this for example
- 00:11:47 to navbar whip-snap bar dark and BG dark
- 00:11:52 if we do that we got a dark navbar and
- 00:11:55 you see the text and the menu button
- 00:11:58 automatically adjusts so this is pretty
- 00:12:00 cool and this allows you to quickly add
- 00:12:02 a navigation bar with basic features to
- 00:12:06 your page now I hope that these basic
- 00:12:09 explanations were helpful especially
- 00:12:12 regarding the responsiveness and how you
- 00:12:14 can move menu items around position them
- 00:12:17 to the right to the left
- 00:12:18 definitely dive into the official Docs
- 00:12:20 if you want to learn more about it and
- 00:12:23 hopefully see you in a future video tube
- 00:12:25 bye