22 min read

Styling the Navigation Bar

Turn a bulleted list of links into a horizontal bar with hover and active states.

From List to Bar in Five Steps

The navigation is an unordered list of links. Kasun styles it step by step: 1 Remove the bullets and default spacing: list-style: none; margin: 0; padding: 0; 2 Put the items in a row: display: flex; on the ul, with a gap between items. 3 Make each link a comfortable button: padding, no underline, light text. 4 Add a hover colour so visitors know they can click. 5 Mark the current page with the class active .

What the browser shows

Try it:

Hover over the links. Delete display: flex from nav ul and see the list become vertical again. Change which link has class="active".

The finished header and navigation bar, exactly as on the example site.

Practice

Which rule makes navigation list items sit side by side?

From List to Bar in Five Steps

The navigation is an unordered list of links. Kasun styles it step by step: 1 Remove the bullets and default spacing: list-style: none; margin: 0; padding: 0; 2 Put the items in a row: display: flex; on the ul, with a gap between items. 3 Make each link a comfortable button: padding, no underline, light text. 4 Add a hover colour so visitors know they can click. 5 Mark the current page with the class active .

What the browser shows

Try it:

Hover over the links. Delete display: flex from nav ul and see the list become vertical again. Change which link has class="active".

The finished header and navigation bar, exactly as on the example site.

What Each Part Does

Practice

Which rule makes navigation list items sit side by side?