WittCode💻

Create a Navbar using HTML and CSS

By

Learn how to create a navbar using HTML and CSS. We will also learn about CSS resets, flexbox, and the header and nav HTML elements.

Table of Contents 📖

Project Demonstration

Below is what we are going to be building. Note the hover effect when the cursor goes over the logo and navigation links.

Image

Writing the HTML

To begin, lets set up the HTML structure. Some important elements to note here are the header and nav tags.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Website</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <nav class="navbar">
      <h1><a id="logo">WittCepter</a></h1>
      <ul>
        <li><a class="underline-text" href="#">Home</a></li>
        <li><a class="underline-text" href="#">About</a></li>
        <li><a class="underline-text" href="#">Projects</a></li>
        <li><a class="underline-text" href="#">Contact</a></li>
      </ul>
    </nav>
  </header>
</body>
</html>
  • The header element is used to house introductory content such as a logo and navigation links.
  • The nav element is used to house a section of a page that contains navigation links.
  • The navbar class will make our nav element look like a navigation bar.
  • The underline-text class will add a hover effect to the text.

The link tag inside the head tag brings in our CSS styles.

CSS Reset and Variable Creation

Now lets styles the page. First lets create a CSS reset, import a font, and create a global CSS variable.

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

:root {
  --primary: white;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
  color: var(--primary);
}
  • Import the Roboto font from Google using the @import rule. The @import rule imports a style sheet into another style sheet.
  • Create a global CSS variable called primary. This will be used to set the color of our text.
  • Create a CSS reset to standardize some default styles. For example, remove the default margin, remove the default padding, and set box-sizing to border-box to ensure the content, padding, and border are included in the total width and height of the element.

Create a Full Screen Background Image

Now lets create the full screen background image. This is done by setting the minimum height of the body element to be the entire viewport and settings its background-image property.

/* https://pixabay.com/photos/ocean-milky-way-boat-sailing-3605547/ */
  
body {
  min-height: 100vh;
  background-image: url('./sea-bg.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position-x: center;
  background-position-y: center;
}

The background image is also fixed so that it stays in place when the document is scrolled.

Styling the Navbar

Now lets create the navbar, we will do this using a class called navbar.

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 16px 32px;
}
  • Position the logo and navigation links to the left and right side of the navbar using flexbox.
  • Fix the navbar to the viewport by setting position to fixed. This means that it will stay in place even when the document is scrolled.
  • Fix the navbar to the top, left, and right of the viewport by setting those values to 0.
  • Add some padding to all sides of the navbar.

Now lets style the list items inside the navbar by targeting the ul tag that is a child of the navbar class.

.navbar > ul {
  display: flex;
  list-style-type: none;
  gap: 40px;
}
  • Set display to flex so the list items are in a row.
  • Remove the bullet points from the item by setting list-style-type to none.
  • Set the gap between list items to 40px.

Now lets style the logo.

#logo {
  font-size: 40px;
  text-decoration: none;
}

#logo:hover {
  cursor: pointer;
}

Here we increase the font size, remove the underline using the text-decoration property, and change the cursor to a pointer when the logo is hovered over.

Creating the Underline Text Effect

Now lets create the underline text effect. We will do this with a class called underline-text.

.underline-text {
  text-decoration-color: transparent;
  text-underline-offset: 8px;
  transition-property: text-decoration-color;
  transition-duration: 1s;
}

.underline-text:hover {
  text-decoration-color: var(--primary);
  transition-property: text-decoration-color;
  transition-duration: 1s;
}

Here we toggle the underline text color from transparent to white when the element is hovered over using the text-decoration-color property. We use the text-decoration-color property and not the text-decoration property because the text-decoration property doesn't work with CSS transitions.