This lesson will be a tutorial on building a cool navigation bar. Note that there are many ways to make navigation bars and I strongly encourage you to make your own.
For now, follow along with the instructions because we are going to look at some nitty-gritty details that come up when designing something complicated
Here is how it will look when we are done:
Setting text-decoration to none gets rid of the underline
You'll also want to go ahead and center the text with text-align
Remember you can't use custom fonts unless you included them in your <head> (See lesson 4 if you want to change your font and don't remember how)
Put your navbar div inside all of your html pages and ensure you have something that works like the example below.
After this we will add some nice effects
Now let's make some simple animations for our navbar using the pseudo-class :hover
By making a new selector for links in list items in the navbar class then appending :hover to the end of it, we can change or add properties for the selected element that are applied when the user hovers the mouse pointer over that element
It may look like all we need to do is add some bottom padding to the element on :hover
If we do that, watch what happens:
We need the block to move up the same amount as we added to the bottom padding.
So what if we started with a top margin of 4px (1)
Then we added 4px of bottom padding on :hover (2)
Then we get rid of the 4px top margin (3)
This way the bottom of the button would stay in the same place and the top would rise up in place of the old margin
I've told you the plan to complete the navbar above, it's up to you to implement it yourself.
If you don't want to have the same navbar as me, still complete this challenge and then move on to the next step
Here is the video again of what this should look like if you've done it correctly:
(Your links and margins/width/padding may be different)
You may want a different style of navigation bar than the one I showed you how to make. In fact you are encouraged to make yours unique!
There are many different ways a navigation bar could look. It could be a sidebar, or contain drop-down menus, etc.
Now is a good time to take a look at your website so far and decide if there are any changes you can think to make now that you've learned a few more CSS techniques.
We'll start by making an interactive image gallery