Building a Simple Nav Bar in HTML/CSS

Nearly all sites start with a nav bar. Here is a very simple one where we use flex box to center the text inside. First we have our HTML code. Paste this into a new HTML file in your text editor.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>

    <nav class="top-nav">
        <div class="logo-container">
            LOGO HERE
        </div>

        <ul class="nav-links">
            <li class="nav-link"><a href="#">Home</a></li>
            <li class="nav-link"><a href="#">Shop</a></li>
            <li class="nav-link"><a href="#">About</a></li>
            <li class="nav-link"><a href="#">Contact</a></li>
        </ul>
    </nav>
    
</body>
</html>

Next we have our CSS code that makes it look pretty. When dealing with an unordered list (the <ul></ul> tag) there will be bullet points by default so we set the list-style property to none. And by using flexbox the list will turn into a row by default.

Make a new CSS file and name it main.css or whatever you want. Just make sure the link in the HTML head matches. Paste in this code, save, and visit the HTML page on a browser.

:root {
    --main-dark-color: rgb(78, 39, 39);
    --main-light-color: rgb(225, 202, 174);
}

body {
    margin: 0;
    background-color: var(--main-light-color);
    font-family: Arial;
}

.top-nav {
    margin: 0;
    height: 70px;
    background-color: var(--main-dark-color);
    padding: 0 10%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
}

.logo-container {
    font-size: 20px;
}

.nav-links {
    display: flex;
    gap: 40px;
    justify-content: space-between;
}

.nav-link {
    list-style: none;
}

a {
    text-decoration: none;
    color: var(--main-light-color);
    transition: 0.4s;
}

a:hover {
    text-decoration: underline;
    color: #fff;
}

Notice that variables in the :root selector. When developing sites you are likely going to use the same colors over and over again. Also you may want to change them so to make it easy its best to use variables. You can do that by setting your main colors inside the :root selector to make it available across all css pages.

CSS css html

Leave a Reply Cancel reply