# 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:

```css
nav ul {
    background-color: Salmon;
}
```

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

{% hint style="info" %}
**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.&#x20;

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.
{% endhint %}

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

{% hint style="success" %}
**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`".
{% endhint %}

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

{% hint style="success" %}
**Task:**

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

```css
display: inline;
```

{% endhint %}

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

{% hint style="success" %}
**Task:**

Add the following `margin` properties so that they fit better.

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

{% endhint %}

`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.

{% hint style="success" %}
**Task:**

Starting with your `index.html`, go to the unordered list.&#x20;

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.
{% endhint %}

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:

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

{% hint style="success" %}
**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.&#x20;

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