CSS With Nav Bar

Let's use CSS to turn our boring unordered list into an actual nav bar!

The main thing to realize is that our nav bar is a unordered list inside <nav> tags. Thus, our CSS selector will specify two elements:

nav ul {
    background-color: Salmon;
}

Type the above code as a new rule in your style.css file.

Why don't we just leave the specifier as ul like we did for h1?

This is because we only want to style the nav bar specifically. By making the selector nav ul, we are specifying to only style unordered lists that are nested inside <nav> tags.

If the selector was left as ul, ALL unordered lists in your website would look like the nav bar, which is not what we want.

We should get rid of the bullet points, so it actually looks like a nav bar.

Task:

Write a new rule with the selector specifying <nav>, <ul>, and <li>.

Write a property named list-style-type with a value of "none".

Let's make it so that the list appears horizontally, like an actually nav bar.

Task:

Add another property to the rule made in the previous task:

display: inline;

See how it looks? Does it looked cramped? Add the following:

Task:

Add the following margin properties so that they fit better.

margin-right: 10px;
margin-left: 10px;

10px means 10 pixels. Adding margins to each list item adds a 10 pixel space in front of and after each item.

Making The Nav Bar Interactive

Most websites tell their users which webpage they are currently on. This is mainly for cosmetic reasons. Let's apply this to our website.

Task:

Starting with your index.html, go to the unordered list.

In the menu, remove the link tags for the Home item. Replace them with opening and closing <p> tags. Update your preview to see how it works.

Notice how the "Home" tab isn't clickable, making it easy to tell that you're currently on the home page. It should look something like this:

<nav>
    <ul>
        <li><p>Home</p></li>
        <li><a href="/page-two.html">Page Two</a></li>
        <!--more tabs here-->
    </ul>
</nav>

Task:

Complete the above task for the other .html files. Make sure that you only make the bar a <p> element if it corresponds to the current page.

For example, only make the second list item a <p> element as that second item corresponds to the second page.