Coding

Stylin’ Around – Creating a sticky Navigation Bar – Part 1

  • 00:00:00 hi welcome everyone to this very first
  • 00:00:03 video of the new serious style and
  • 00:00:05 around in this video we're going to
  • 00:00:08 create this layout you're seeing here or
  • 00:00:12 specifically not this layout but this
  • 00:00:14 navigation bar we can see here with this
  • 00:00:19 little button here on the left
  • 00:00:21 squit links in the middle and the login
  • 00:00:24 and sign up button on the right and a
  • 00:00:25 little extra twist for this navigation
  • 00:00:28 bar is that if you scroll down it will
  • 00:00:31 stick to the top and have this little
  • 00:00:34 border at the bottom so nothing too
  • 00:00:37 fancy but nonetheless neat little
  • 00:00:41 exercise where you can learn a lot about
  • 00:00:43 yeah
  • 00:00:45 positioning different objects that were
  • 00:00:48 interacting between them and general CSS
  • 00:00:52 stuff and this at the end is what the
  • 00:00:55 series is for so let's dive into it so I
  • 00:01:00 got my plank of work space created here
  • 00:01:02 and if you don't know plunker it's
  • 00:01:04 basically online workspace where you can
  • 00:01:09 develop HTML CSS JavaScript stuff and
  • 00:01:14 have a live preview of your work there
  • 00:01:19 are similar services like code pen I
  • 00:01:21 think it's really neat because you don't
  • 00:01:23 have to set up this whole workflow
  • 00:01:27 workspace on your local machine and you
  • 00:01:29 can share it easily so that's a really
  • 00:01:31 great thing so let's start it first
  • 00:01:36 thing I want to do is set up a basic
  • 00:01:38 html5 skeleton in my index dot dot HTML
  • 00:01:42 file and I do this by writing HTML
  • 00:01:47 hitting control space and then I get
  • 00:01:50 this little preview and if I hit enter
  • 00:01:53 planker will provide me with a basic
  • 00:01:56 skeleton so while that bitch has
  • 00:01:59 replaced this title by navigation fun
  • 00:02:03 needs a meta tag and delete a body tag
  • 00:02:07 here and what we'll need for this
  • 00:02:09 project is
  • 00:02:11 jQuery for one part and we can add it
  • 00:02:14 directly in plonker if you search for
  • 00:02:18 jQuery and then here more let's take one
  • 00:02:22 point eleven point three ad and we
  • 00:02:32 should now have it added to did this
  • 00:02:36 work now no it's down to edit okay so
  • 00:02:38 now we go to jQuery added to our project
  • 00:02:42 and we will need something else because
  • 00:02:47 we got this hamburger icon here and this
  • 00:02:51 comes from the phone awesome I can
  • 00:02:54 collect and therefore we have to
  • 00:02:57 implement for awesome so let me do this
  • 00:03:03 by just going to their website photo
  • 00:03:06 awesome and down I don't want to
  • 00:03:13 download it get started here I need this
  • 00:03:17 link go back to the plunker tab and add
  • 00:03:25 it to the top and I will also add our
  • 00:03:34 style of CSS and at the bottom of our
  • 00:03:38 body I will add our script dot chess
  • 00:03:44 okay so now we're ready to go and I will
  • 00:03:49 start by creating the layout here in the
  • 00:03:52 body tags and first things first I will
  • 00:03:55 provide us with some dummy content so
  • 00:03:57 basically a headline headline and a
  • 00:04:04 paragraph with some lorem oops if some
  • 00:04:10 text inside it and I will basically just
  • 00:04:16 copy that
  • 00:04:18 it beautify your code so that we have it
  • 00:04:22 well organized nicely structured and if
  • 00:04:25 we go to the preview here with the I
  • 00:04:28 button live preview we see this dummy
  • 00:04:34 content here right so above the dummy
  • 00:04:38 content we will have our navigation and
  • 00:04:41 set a header tag inside the navigation
  • 00:04:47 we will have three sections so to say we
  • 00:04:49 will have left section which will be
  • 00:04:54 this button a right section which will
  • 00:04:58 be comprised of these two buttons and
  • 00:05:00 the middle we will have our Quick Links
  • 00:05:03 so like the ad left div the right div
  • 00:05:12 and in the middle we will have an
  • 00:05:14 unordered list with the list items of
  • 00:05:22 the links nested inside them and let's
  • 00:05:24 create six of them here so I will just
  • 00:05:30 quickly fill those out
  • 00:05:37 okay so I got decide these items we need
  • 00:05:41 a button here the oops not sex the sex
  • 00:05:47 section button and here I will have a
  • 00:05:51 span with the hamburger icon oops
  • 00:05:54 didn't mean to do that classes every
  • 00:05:58 five bars I guess yes this is correct
  • 00:06:04 and here we will have two buttons the
  • 00:06:13 login and to sign up button okay
  • 00:06:18 so yeah this is our basic navigation
  • 00:06:21 doesn't look at all like it does here
  • 00:06:24 but this is next point in our agenda so
  • 00:06:28 let's go into this style of CSS file
  • 00:06:31 here and I will start with the body tag
  • 00:06:34 and under just add some basic styling to
  • 00:06:40 it or respectively removed standard
  • 00:06:44 margin and padding it provides give it a
  • 00:06:48 four family of Roboto
  • 00:06:51 fallback of son serif and a font size of
  • 00:06:59 16 pixels okay so looks a bit better I'd
  • 00:07:05 say next
  • 00:07:07 I want my forgot this here I want my
  • 00:07:10 dummy content to live inside a main
  • 00:07:13 container so copy off that oops
  • 00:07:19 cut it and paste it inside my main
  • 00:07:22 container here and here whoops let me
  • 00:07:29 design this main container with a width
  • 00:07:34 of 80% and the margin of all so that is
  • 00:07:39 nicely centered like though so
  • 00:07:43 and with this we can start working on
  • 00:07:47 our navigation so let's give it a class
  • 00:07:54 of top nav say over top nav we'll have
  • 00:08:06 let's give it up a little bit of a
  • 00:08:07 padding 16 pixel
  • 00:08:11 let's give it margin of audit so that it
  • 00:08:17 will be centered to give it a background
  • 00:08:21 color white so that when later we attach
  • 00:08:26 it to the to the top of our window when
  • 00:08:29 we scroll it is above the text and
  • 00:08:34 that's all planned with it we also
  • 00:08:38 wanted to have with 50% like the content
  • 00:08:42 has and we want text to a line in the
  • 00:08:47 center because you want exactly just
  • 00:08:50 that these links Quick Links will be
  • 00:08:54 centered and that's also give it a line
  • 00:08:58 height of 35 pixels so that in the end
  • 00:09:02 everything will be nicely vertically
  • 00:09:06 aligned so right now that doesn't look
  • 00:09:09 at all the way we want so let's work on
  • 00:09:12 this unordered list next so therefore we
  • 00:09:16 have to remove telus style of our yeah
  • 00:09:23 listen we want to display it inline
  • 00:09:27 block we also want to remove the padding
  • 00:09:34 and margin that it has by default we
  • 00:09:40 also need to edit a list items now
  • 00:09:43 because those should be inline block too
  • 00:09:47 so that they line up looks a lot better
  • 00:09:51 if you ask me both links could certainly
  • 00:09:57 yeah get some styling I'd say so let's
  • 00:10:01 work on that why like giving them some
  • 00:10:07 different styles I want a dark gray
  • 00:10:13 color I don't want the underlining I
  • 00:10:21 also want them to change their color
  • 00:10:26 when they're hovered over or active so
  • 00:10:31 let's give them one color of light gray
  • 00:10:37 looks good to me and I think yeah I
  • 00:10:46 think this is good so we should work on
  • 00:10:48 this buttons next for this and we'll
  • 00:10:54 just give them on one hand
  • 00:10:57 basic class of button I could also just
  • 00:11:02 select the button tag itself but I'm
  • 00:11:05 going to do it this way just as it's
  • 00:11:07 more yeah generic I guess so your button
  • 00:11:11 and this will be button section because
  • 00:11:14 we need a different styling for this
  • 00:11:16 button than we need for these and here
  • 00:11:21 we will also provide a buck metal with
  • 00:11:22 button user
  • 00:11:29 button user okay that's one day these
  • 00:11:36 styles so I will have a button style
  • 00:11:41 here and we'll have a petting of eight
  • 00:11:46 pixels we will have border-radius of
  • 00:11:51 free pixels we will have I guess no
  • 00:11:59 border
  • 00:12:00 I'm we also want the form family to be
  • 00:12:11 the same as the rest of the document and
  • 00:12:17 the font size should also be the sexting
  • 00:12:24 pixels we provided in the body and if we
  • 00:12:27 hover over it we see that our cursor
  • 00:12:29 doesn't change
  • 00:12:30 so let's provide a pointer cursor here
  • 00:12:33 okay now for the section button
  • 00:12:39 I want background color to be inference
  • 00:12:45 parent and I want it to
  • 00:12:54 we have difficut differently if we hover
  • 00:12:57 over it because then I wants the
  • 00:13:00 background color to be this light grey
  • 00:13:06 excellent and for the user button but
  • 00:13:11 user I'll have a background color of
  • 00:13:18 light gray oops
  • 00:13:24 and I will have a hover effect of my
  • 00:13:31 moves background color white and color
  • 00:13:36 will be no dark gray and color will be
  • 00:13:44 white so excellent that's what I want
  • 00:13:50 now we need to line this up therefore we
  • 00:13:53 have this left and does right class here
  • 00:13:56 so let's work on this left class will
  • 00:14:00 bus just be float:left and you probably
  • 00:14:04 guess that the right class will be
  • 00:14:06 float:right okay looks pretty good now
  • 00:14:12 the only thing we're missing is the part
  • 00:14:16 where this navigation will be attached
  • 00:14:20 to our top of the window when we scroll
  • 00:14:25 down and I will show you how this is
  • 00:14:29 done in the next video so stay tuned and
  • 00:14:33 leave your people feedback if you like
  • 00:14:34 see you see you this is max