Up next in 10
Responsive Navbar Tutorial
174 views
Feb 7, 2024
Enhance your web development skills with this comprehensive "Responsive Navbar Tutorial." In this video, you'll learn how to create a fully responsive navigation bar that adapts seamlessly to various screen sizes. The tutorial covers the fundamental concepts of HTML, CSS, and JavaScript to build a responsive and user-friendly navbar. From setting up the HTML structure to implementing CSS media queries and adding JavaScript functionality for mobile responsiveness, this guide provides a step-by-step walkthrough suitable for developers of all levels. Whether you're a beginner looking to understand the basics of responsive web design or an experienced developer aiming to enhance your navigation components, this tutorial offers practical insights and techniques. Join this session to master the art of creating a responsive navbar, ensuring optimal user experience across desktops, tablets, and mobile devices in your web projects.
View Video Transcript
0:00
In today's video, we're going to create a fully responsive nav bar that when it becomes too small
0:04
will show a hamburger menu that will drop down our options and expand and collapse as needed
0:08
Let's get started now. To get started, I have an HTML file with the boilerplate HTML code to import our different
0:17
style sheets we're going to create, as well as our JavaScript file that we're going to create
0:21
and inside of the body, we just need to put our HTML for the nav bar. So we're just going to use a nav element with the class of nav bar so that we can use this as our nav bar
0:29
and we can reference it in our CSS. And then inside of here, we need to create sections for both our brand title
0:35
as well as all of the buttons that we're going to have. So the first thing we're going to do is just create a div
0:40
give it the title or the class of brand title, and in here we'll just put brand name
0:45
Because this is going to be the name section of our brand, and as you can see, that pops up in the top left
0:50
And then we need a second section, which is going to contain our nav bar links
0:54
So we're just going to create another div for that. Give it a class here of navbar links. links
0:59
And then inside of here we're going to put our different links, and we'll put them inside
1:03
of an unordered list just because of a list item, and each one of these will be a list
1:08
item with an anchor tag inside of them. And inside of this anchor tag, we have Home is our first one, and we'll just give it here
1:15
an H-ref of just a hashtag since it's not actually going anywhere
1:20
I'm then going to copy this down twice more so that we have three links in total, and this
1:24
one is going to be in our about link, and then finally we'll have a contact linked, and now
1:28
Now as you save that, you see that we have all the different information on our page that we need
1:33
and we can actually start styling our site for the desktop version first
1:36
So let's open up our styles.ciss here, and let's do a little bit of boilerplate CSS that
1:40
we need to make our project easier. The first thing we're going to use is set up box sizing, and we're just going to use border
1:46
box, and this will make styling our width much easier. And then we're going to take our body, and we're going to remove all margin and padding from
1:53
the body, so that way we can butt everything up right next to the border of our screen
1:57
like this. Now we can start actually styling our nav bar element. The first thing that we want
2:02
to do is use Flexbox to display these objects because we're going to want them to line up side
2:07
by side. We then can justify the content with space between, and this will push them as far
2:12
apart from each other as possible. And then lastly, we want to align our items in the center
2:16
so that our links, since they're going to be smaller, will line up perfectly in the center
2:20
of our brand name, which is going to be larger. Lastly, since this is going to be our nav bar at the top
2:26
we want to give it a background color. That's going to be darker, so we'll just give it a really dark gray color
2:31
We want to make all the text inside of it white by default. So now if you save that, we see that we have a brand name over here on the left, which is centered
2:39
and on the right we have our links which are centered as well. So now we can move on to actually styling our brand title first because that'll be the easiest
2:45
of the two to style. All we need to do is increase the font size of bits since we want our brand name to stick out
2:51
as opposed to our links. So we'll make it 1.5 times our root font size
2:55
and we'll add a little bit of margin on it so that it doesn't quite line up at the very end of our screen
3:00
We'll just do 0.5 here, for example. And now if we save that, you see that we got a larger brand name, which is going to be centered and pushed away from the edges of our screen
3:09
Now let's move on to actually styling our navbar links. In order to style our nav bar links, we just need to use that navbar links class that we created earlier
3:17
And we want to select the UL which is going to be that unordered list and we are going to just remove all the normal styling to it So we going to remove the margin and we going to remove the padding on it
3:28
And then we're also going to make it display of flex so that we can easily align the items
3:33
inside of our list side by side as we need to and space them out properly
3:38
Next, what we want to do is we want to select the actual LIs inside of here
3:42
So we're going to select our nav bar links again. We want to get all of the list items
3:46
I just want to remove the list style from them, because we don't want to want to. that underline to be appearing or have any of the dots on it
3:51
So we can remove that list style. And then we can select the actual A tags, the anchor tags, inside of our nav bar links here
3:57
We could just do this by selecting the LI and all the anchor tags inside of it
4:01
And here is where we can actually remove the different underline. By just saying text decoration none
4:07
We want to set the color to be white by default. And we also want to just give it a little bit of padding around each one
4:13
We'll just say one REM. And we'll just make them display block so that they show
4:18
up as a larger size, and there we go, we now have our links on the right hand side here
4:23
and we have our brand name on the left side here, pretty well spaced out from each other
4:27
And these links, when we click on them, as you can see, it adds that hashtag to our URL, which is perfect
4:32
Now what we need to do is actually style these so that they have animation on hover, so that we
4:36
can tell that we're actually hovering over them. So to do that, we're going to want to just select our nav bar links here, get our L.I
4:43
And when we hover over this LI, all we want to do is just change the background color
4:48
So we got our background color and we'll just make this another of those gray colors
4:54
I can actually type and now we hover, you'll see that we get that light gray background behind our different anchor tags when we hover over them
5:02
And we have a non-responsive navbar complete, but as you can see, as we shrink this, it doesn't actually make our hamburger menu in the left-hand corner
5:11
So what's actually go about implementing that now? The first thing that we need to do is actually add that hamburger menu inside of our HTML
5:17
inside of our HTML. We can just put it right here in between our two current divs, and we can just make this
5:23
one an anchor tag. We're just going to give it another H-ref that is going to lead to nowhere
5:28
We're going to give it a class here of toggle button, so that way we know that this is
5:33
our button that we're using to toggle, and inside of here we just want to put three different
5:37
spans that are going to represent the three lines of our hamburger menu
5:41
So we're going to have a span, give it a class here of bar, and we're just going to copy this
5:45
three tires. We don't want anything in this span since we don't actually want any text
5:49
and that's all we need to do with our HTML. Now we can go back into our styles, and we
5:53
can work on styling that toggle button. So let's first select our toggle button and actually
5:58
style how we want this to look. The first thing they're willing to do is we're going to want to position this absolutely so that we can force it to be all the way on the right side
6:06
of our screen without messing with the flow of the rest of our elements. We also want to make
6:11
it so it's positioned not quite at the very top of our screen, so we'll push it 0.75
6:15
REM from the top of our screen, and we're going to do the same thing, but one REM from the right
6:21
side of our screen. We want to make sure that this does not display by default, because we don't
6:25
want this to show up on our larger screens, only our smaller screens. And inside of here
6:31
we're going to change our flex direction to be column, so that all of our different spans
6:36
line up on top of each other from one at the very top and the third one at the very bottom
6:40
and we going to justify so our content with some space between them again so that we have as much space as possible in between these different elements inside of our toggle button And lastly we just want to set a width and a height We just do 31 pixels as the width and we set the height here to be 21 pixels
6:57
So now if we change this display known to display effects, you'll notice that it doesn't actually
7:01
do anything, and that's because our toggle buttons don't actually have any bars inside
7:05
of them that are styled. So let's select the bars inside of our toggle button
7:11
So we'll just select that bar class here. And all we need to do is just add a little bit of styling here to make these actually show up
7:18
So we'll make them 3 pixels tall. We're going to make them take up 100% of the width inside of the container of our toggle button
7:25
We want to give them a background color here of white so that they show up
7:29
Whoops, white. And then lastly, just a little bit of a border radius around these
7:34
So that way we can see a little bit of a rounding of the corners. We'll just say 10 pixels, for example
7:40
this border radius. And now if you say that, we see we have our hamburger menu up here in the top
7:45
right hand corner, which is perfect, and it looks exactly as we want it to. But we don't actually
7:49
want this to display on our larger screens, so we'll change this display flex, back to display none
7:54
And there we go, we have our normal menu. And now when we shrink this menu down, we want to
7:58
actually change this to be our hamburger menu. So down here, we're going to use what's called
8:02
a media query, which allows us to say, when a certain condition is met, run the code inside of
8:07
here, but if it's not met, then don't. So in our case, if the max width of our screen is
8:12
400 pixels or less, so if our screen is less than 400 pixels wide, we know that we want to
8:17
run the code inside of this media query. And your media query may be a different value here. I have
8:22
my browser zoomed in to 150%, so it's easier for you to see, so you may need to use a larger
8:27
number such as 600 as opposed to 400. So now inside of here, what we can do is we can take
8:32
our toggle button, and we just want to change the display of this to flex so that it'll actually show
8:37
up and then we want to make our nav bar links. Here we want to make them disappear. So we'll
8:41
select our nav bar links. We'll set the display to none. And now if you save that, you see we
8:47
get our hamburger menu on the right hand side, but if we increase our screen, you see that we get
8:51
our normal icons, which is exactly what we want. And as we decrease, we get a hamburger
8:55
and it'll go back and forth as soon as we hit that 400 pixel breakpoint. Now instead of making
9:01
this display none, let's just comment this out for now so that we can actually see our different icons in here
9:05
And we want to style our icons, our links over here, to be below our brand name so that when we click this menu, it'll slide in and slide out as we want it to
9:14
So the order to do that, all we need to do is take our nav bar here, and we just need to change the flex direction to column
9:21
And now, as you can see, everything is going to be positioned above each other and below each other as we want
9:26
In order to make our brand name appear back on the left side, we just want to align our items in here, and we want to align them at the flex start
9:33
And now if you say that you see we get our brand name all the way on the left and we have our items here, which are going to be stacked right below it
9:39
But currently they're being stacked left to right and we want to stack them top to bottom. And that'll be an easy fix for us
9:45
What we need to do is we need to select our Nabbar Links class again. We want to select the actual UL inside of it
9:52
And this UL, as we remember earlier, we made it display of flex. So we can just change the flex direction here to column
9:59
And if we save that, you see, they're now stacked above each other as we want them to. but we want them to be dead center over here instead of on the left
10:06
So in order to do that we just going to set the width here to 100 And that give us our UL spanning 100 And we just need to make our actual container also span 100
10:16
So our nav bar links, all we need to do here is make our width 100%
10:21
And now you can see that our actual items are spanning 100% of the width
10:25
and we just want to make them aligned in the center. So we're just going to go down here, select our nav bar links again
10:31
and we're going to want to select the actual lies inside of them, and we just want to say text align center so now our text is going to be dead center just like this
10:40
all i think that really needs to be left is needed to remove some of the padding that's around these
10:44
elements because they're a little bit too far spaced out in my opinion so let's go down here
10:49
we're going to select our navbar links again and we're going to select the actual anchor tags
10:54
this time we're just going to change our padding on these anchor tags to be 0.5 rm and 1 rm
11:02
And if I spell that correctly, you see that we now have our elements being closer spaced
11:07
out together as opposed to being farther spaced out as we want on the larger desktop view
11:13
And lastly, we're going to use an active class in order to determine if this should be shown
11:17
or not. So we're going to have navbar links here. .active. So when it is active, we want our display to be flex
11:27
And now we can go back and completely uncomment this display none, so as you can see by default
11:31
our menu is not being displayed, but when we click this, we want our menu to come down
11:35
and if we click it again, we want our menu to go up. And that's where we're going to have to start using JavaScript in order to implement that
11:41
Luckily, the JavaScript for this is going to be fairly straightforward, so let me just walk
11:45
you through it real quick. The first thing we want to do is actually get that toggle button element that we have inside
11:51
of our code. So we can just say document. Get element by a class name, and we can just pass in the class name here, which as we know
11:58
is called toggle button. And since this returns an array, we just want to get the first element in that array
12:04
which is going to be the toggle button right here on our page
12:08
Next, we want to get the navbar links that we have, so we can do essentially the same thing
12:13
document. Get element by a class name, and instead of using toggle button, we'll just use
12:18
navbar links. And again, there's only one of those, so we just want to get the very first one
12:23
on our page here. And now we have our toggle button and our links that we can access in the
12:27
rest of our code. So we can just take our toggle button. button here and we can just add an event listener. We can say whenever this element is clicked
12:37
we just want to run a certain function, which we're going to define it here. And inside of
12:41
this function, all we want to do is take our navbar links. We want to access all of the different
12:46
classes on it, and we just want to toggle the active class. Essentially, all this means is if the
12:51
active class does not exist, it'll add it, and if the active class does exist, it will remove it
12:56
And now if we save that, if we click on our button over here, you can see that our menu pops open
13:00
And if we click it again, you see that it disappears. And that's exactly perfect
13:04
That's what we want. And as we expand our screen, you can see it turns back into a normal menu
13:09
And these links work just as before. Look exactly the same. And as we shrink it, we get the hamburger menu, which will open up, pop down, and close as we click on it
13:17
And that's all it takes to create an incredibly simple nav bar that is completely responsive
13:22
for mobile and desktop views. If you guys enjoyed this video, make sure to check out my other CSS tutorials, which are
13:28
going to be linked over here. and subscribe to my channel for more content just like this
13:32
Thank you guys very much for watching and have a good day