Item list styling

Lesson 11 of 12 in Coddy's Bottom Navigation Bar - HTML/CSS Project course.

Let's add styling for list items; using this, you will be able to adjust icons properly.

Challenge

Easy

Target list items from the navigation class and the unordered list .navigation ul li:

Set the height, width to 35px and margin to 1rem.
Set the padding to 0 1rem.
Set the color to anything you like! (recommended: white)
Set the border-radius to 50%.
Set display to flex, align-items, and justify-content to center.

Add the below styling:

cursor: pointer;
transition: all 0.2s linear;

Try it yourself

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Write HTML code here -->
        <script src="script.js"></script>
    </body>
</html>

All lessons in Bottom Navigation Bar - HTML/CSS Project

1Navigation Bar

Code Set up main-container

Navbar

Unordered list & title

2The Style

Unordered list styling

Item list styling Project lesson

Animation on hover Icon