Skip to content

Navigation

HTML

Classic Version

The classic version uses an unordered list for the navigation:

<nav id="navbar">
    <ul>
      <li><a href="#" class="active">Home</a></li>
      <li><a href="#" >Projects</a></li>
      <li><a href="#">About</a></li>
    </ul>
</nav>

Newer Version

This version has appeared more recently and it just has links in the nav with no list.

<nav class="site-nav">
  <div class="links" id="nav-links">
    <a href="" class="active">Home</a>
    <a href="">Projects</a>
    <a href="">About</a>
  </div>
</nav>

Neither one is right or wrong and they each have pros and cons. We will not do a deep dive here, but you should pay attention if you are using a tutorial which method they use as it will affect how they CSS is styled to some extent.

Horizontal Navigation

Some sites use a vertical navigation (on the left or right side of the page) but most put the navigation horizontally across the top of the page. We will look at an example that does this.

Removing the Bullet Points from Lists

If you’re using the classic style of nav with an unordered list you will need to remove the bullet points from the list and remove the margin and padding that browsers put in. Here is some base CSS you can start with to do that:

nav ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

Using Inline-Block for Horizontal Nav

In this method we set the display property of each of the elements that hold a nav item to inline-block

nav li {
  display: inline-block;
}
/* OR BELOW if not using a list */
nav a {
  display: inline-block;
}

Here ia CodePen Example: https://codepen.io/jen4web/pen/ZEeqXYR (see Jen Kramer’s course below)

Using Flex for Horizontal Nav

When you use flex to control the layout of your nav, then you need to set the display of the container. In the class list-based nav the <ul> element is usually the container you will set. When you just add links into the nav the often the nav element itself is what gets display flex.

nav ul {
  display: flex;
}
/* OR BELOW if not using a list */
nav {
  display: flex;
}

Here is a CodePen Example: https://codepen.io/jen4web/pen/ExWdwZJ

Smart Navbar with Hamburger Menu

This codepen is meant to be something that you can copy and use in your project, as long as you are OK with the way it looks:

We will look at how you can use the HTML, CSS and JavaScript in this example in your site. Navigation is often complex enough that you will use other people’s examples and so this is practice in how to implement some example code in a project you are working on.

HTML

This example uses the more modern style with the links directly in the nav (no list). It also

<nav class="site-nav">
  <div class="site-title">
    <a href="/">Site title and/or Logo</a>
  </div>
  <a href="#" class="hamburger" id="nav-toggle"><span></span></a>
  <div class="links" id="nav-links">
    <a href="" class="underline">Link 1</a>
    <a href="">Link 2</a>
    <a href="">Link 3</a>
    <a href="">Link 4</a>
  </div>
</nav>

LinkedIn Learning Course

There is a full course in LinkedIn Learning on how to create Navigation:

HTML and CSS Creating Navigation Bars by Jen Kramer

[NOTE you need to sign in to LinkedIn Learning to be able to visit that link. This course is two hours and covers both Horizontal and vertical navigation as well as a number of ways to style the navigation. We will watch one video in class that shows how to use flex to style a nav.

Also, here is a link to a PDF that contains links to all of the CodePens she uses in each of the mini lessons. There are links to both a Starting pen that does not have the HTML and CSS in the lesson and a n Ending pen that shows the final result.

Creating Navigation Bars Exercise CodePen Links

Tags:

Leave a Reply