CSS

CSS navigation bar creation from scratch: use CSS navbars like a pro CSS Navigation Bar

Every website should have a system which would help users to navigate it easily. That’s why we need to create a CSS menu. In this tutorial, you will see how horizontal and vertical navigation bars can be created. You will master all fundamental principles of CSS navigation bars. After this tutorial, you’ll be confident in both creation and styling of CSS navigation bars.

This tutorial will explain what every navigation bar must contain and which HTML tags are used to build one. After that, you will learn how to style the CSS navigation bar to look slick and fit the design of the whole webpage. You will understand how to remove addition browser default spacing from a CSS navbar. That way you will have full control of the appearance of the CSS menu you’re making. Also, you will learn how to apply the hover effect to make your CSS navigation bar more exciting.

Let’s go!


CSS Navigation Bar: Fundamentals

  • CSS navigation bar is generally either vertical or horizontal
  • Navigation bars contain links you can use to navigate the website
  • Every website should have an easy-to-use navigation
  • Menus can be transformed into nice-looking CSS navbars

Master Top Secret CSS Tricks in Less Than 1 Hour: Exclusive Video

LOCKED VIDEOSIGN UP TO UNLOCK. IT’S FREE.


CSS Navigation Bar: Definition

Without any additional styling properties, a CSS navigation bar is nothing more than a simple collection of HTML links. Therefore, standard HTML is needed as a base of a navigation bar. To create a CSS navbar, you need two HTML elements:

  • ===== Hidden Content. Only Registered users can view. Please Sign Up , it's FREE! =====
  • <li> (defines an item of a list)

    <ul> (defines an unordered list)


In these examples, the navigation bar will be built from a standard HTML list elements:

Example

<ul>
  <li><a href="https://www.bitdegree.org/" target="_blank">Link1</a></li>
  <li><a href="https://www.bitdegree.org/" target="_blank">Link2</a></li>
  <li><a href="https://www.bitdegree.org/" target="_blank">Link3</a></li>
  <li><a href="https://www.bitdegree.org/" target="_blank">Link4</a></li>
</ul>

Try It Test this code LIVE

Since you should have full creative control over your CSS navigation bar, removing browser default setting is essential. list-style-type: none removes the bullets from your bar. margin: 0; and padding: 0; eliminates browser default spacing settings. These properties are used for a horizontal navigation bar as well as a vertical one.

In the example, we remove padding, margins, and the bullets from the list:

Example

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

Try It Test this code LIVE


Vertical Navigation Bar

The vertical navigation bar can appear on a side of a webpage (like the one you see on the left of this page with CSS tutorials listed). Or it can stay hidden until you press a “Menu” button. Or it can appear once you hover over a certain element. I could keep on naming the ways to apply a vertical navigation bar in a website for hours but let’s rather explore, how we can create one.

First, you need to define the styling properties for your unordered list (<ul>). As mentioned before, it’s crucial to remove the list-style-type, padding, and margin. Here, you can also add a background styling properties like a color ar an image. You should also define the width of your navigation bar in the <ul> declaration block.

Next, we move to the items on the list (<li>). These items represent our links. Therefore we use the <a> tag to define them. Here, we declare the display type, the color of our links as well as CSS padding. We can also remove the underline from the links using tex-decoration.

Note: to create CSS navigation bars we use display: block property. It displays elements as blocks and make the whole area clickable as well as let us define the padding, width, height, margin, etc.

Additionally, in the example below, we also use the :hover selector to make the link elements <a> change text and background colors once a mouse cursor hovers over them:

Example

li a {
    display: block;
    width: 70px;
}

Try It Test this code LIVE

Note: You can also define the widht, background color, and other styling properties within the link item <li> styling declaration block instead of the <ul> declaration block.


Ways to Style Vertical Navbars

Multiple styling properties can be applied to CSS navigation bars. From a background color to a font family, from a text-align to pseudo classes and so on. In this section, you’ll learn how to change the styling properties of an active item of your CSS navbar, center align the text, add borders and manipulate the length of your CSS menu.

In this example, a basic vertical navigation bar is created, and the color changes when hovered over:

Example

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 250px;
    background-color: #8ef9be;
}

li a {
    display: block;
    color: #262424;
    padding: 9px 17px;
    text-decoration: none;
}

/* When the link is hovered on, its color will change */
li a:hover {
    background-color: #8e8d8b;
    color: gray;
}

Try It Test this code LIVE


Active Navigation Link

You can make styling changes to an item of your CSS navigation bar when it’s active (open). This can increase the quality of user experience even more! To do that, you will need to use a class selector and indicate which styling properties should change.

In this example, an “active” class is added, letting users know what page they are on:

Example

.active {
    background-color: #74cffc;
    color: gray;
}

Try It Test this code LIVE


Center Links & Add Borders

Most of the time text appears in the middle of a CSS navigation bar button, right? Well, all you need to achieve this effect is  text-align:center property. You should assign it to the <li> or <a> elements.

Note: you don’t need to limit yourself to only center alignment. left and right values can also be used.

To have a border all around the navbar add a CSS border shorhand property to the <ul> element. To have individual borders separating individual items add the border-bottom property to the <li> elemets except for last one. You can make an exception for it using the pseudo class :last-child.

In the example, we add borders and align the text on the left side:

Example

ul {
    border: 2px solid #bca7a7;
}

li {
    text-align: left;
    border-bottom: 2px solid #bca7a7;
}

li:last-child {
   border-bottom: none;
}

Try It Test this code LIVE


Fixed Height Vertical Navbar

To have a CSS navigation bar that constantly stays on the side of your website and occupies the whole possible height, we need to define the height: 100% property and value. Also, to make the bar stay at the same place even when the page is scrolled, we need to determine a fixed position. Lastly, overflow: auto adds a scrollbar to the navigation bar if there’s to much content.

The sidebar on this website is a great example of a fixed vertical CSS navigation bar. However, to see the code of a fixed vertical navbar, take a look at the example below:

Example

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 30%;
    background-color: #ccfeff;
    height: 100%; /* This enables full height */
    position: fixed; /* The position will be constant */
    overflow: auto; /* This enables scrolling */
}

Try It Test this code LIVE


Horizontal Navigation Bar

To create a horizontal navigation bar, you need float styling property or inline value assigned to the display property.

Inline List Items

The first method is adding the display:inline property and value to our <li> elements to build a horizontal navbar. <li> elements are block elements, by default. With inline value we enable them to be displayed in a row instead of creating a new line for each.

In the example, we align our links side by side using display: inline:

Example

li {
    display: inline;
}

Try It Test this code LIVE

Floating List Items

The second way to create a horizontal navbar is by using the float property. We specify a navigation links layout by floating the <li> elements. We need to determine the value of the float property using keywords: left or right. 

In the example below, we create a CSS navigation bar using float:left:

Example

li {
    float: left;
}

a {
    display: block;
    padding: 9px;
    background-color: #d4b3fc;
}

Try It Test this code LIVE


Ways to Style Horizontal Navbars

Same as with a vertical navigation bar, we have a lot of styling options available to us to design a slick looking horizontal navbar. Below, you’ll see how to add some nifty styling properties to your horizontal CSS menu.

In this example, a basic horizontal navbar is created, and the background color changes when hovered over:

Example

ul {
    list-style-type: none;
    margin: 1px;
    padding: 1px;
    overflow: hidden;
    background-color: #c67575;
}

li {
    float: left;
}

li a {
    display: block;
    color: gray;
    text-align: left;
    padding: 15px 17px;
    text-decoration: none;
}

/* A color changes when hovered over */
li a:hover {
    background-color: #7300ff;
}

Try It Test this code LIVE


Active Navigation Link

To indicate which page user is currently on we can add different styling properties. By using a class selector, we can change the look of our navbar item when it is opened.

In this example, a class is added to change the styling of an element and let users know what page they are on:

Example

.active {
    background-color: #d61d1d;
}

Try It Test this code LIVE


Right-Align Links

If you checked out the examples above, you already saw how to float elements on the left side of the page. To make them appear on the right side, we only need to change the value of float to right.

In the example, the list items are floated to the right with the float:right:

Example

<ul>
  <li><a href="https://www.bitdegree.org/" target="_blank">Link1</a></li>
  <li><a href="https://www.bitdegree.org/" target="_blank">Link2</a></li>
  <li><a href="https://www.bitdegree.org/" target="_blank">Link3</a></li>
  <li style="float: right;"><a class="active" href="https://www.bitdegree.org/" target="_blank">Link4</a></li>
</ul>

Try It Test this code LIVE


Border Dividers

If you want a more visible separation between your navbar buttons, you can add CSS borders. You can create boxes for each item using border property or only simple lines To have lines separating the items we add the border-right property to <li> elements to create link dividers.

In the example, we separate links with individual borders on the right side of an item:

Example

/* All items except the last one will have a border on the right side */
li {
    border-right: 2px solid #86cee0;
}

li:last-child {
    border-right: none;
}

Try It Test this code LIVE


Fixed Navigation Bar

You can make the navigation bar stay permanently at the bottom or the top of the page regardless if it’s being scrolled or not.

Fixed top horizontal navbar can be added using position: fixed and top: 0.

In the example, we apply those priciples in action:

Example

ul {
    position: fixed;
    top: 0;
    width: 100%;
}

Try It Test this code LIVE

Fixed Bottom navigation bar is created by determening position:fixed and bottom:0.

In the example, we create a bottom fixed bar:

Example

ul {
    position: fixed;
    bottom: 0;
    width: 100%;
}

Try It Test this code LIVE

Sticky Navbar works very similarly to the fixed horizontal bars. However, it’s not removed from the natural flow of the document.

In the example, we apply sticky (-webkit-sticky for Safari browser) value to the postion property:

Example

ul {
    position: -webkit-sticky; /* For Safari */
    position: sticky;
    top: 0;
}

Try It Test this code LIVE


Gray Horizontal Navbar

Here we will apply all previously mentioned horizontal navbar styling properties to create a fully functional CSS menu. We’ll add a background color to our bar as well as have an active element with a different background. We will alight items and have a fixed top position of our navbar. We’ll also add the hover effect and add horizontal dividers.

Take a look at a navbar you could easily create using the previously mentioned properties:

Example

ul {
    border: 2px solid #e7e7e8;
    background-color: #f4f4f4;
}

li a {
    color: #667;
}

Try It Test this code LIVE


CSS Navigation Bar: Conclusion

I’m certain that after finishing this tutorial, you will be able to create slick vertical and horizontal navigation bars. For good measure, let’s sum up the info:

  • CSS navigation bars enhance user experience;
  • Essentially, navigation bars are a list of links with styling properties applied;
  • To style a navigation bar we use two HTML elements: unordered list (<ul>) and list item (<li>);
  • We remove the item markers using list-style-type as well as browser default spacing using padding and margin;
  • ===== Hidden Content. Only Registered users can view. Please Sign Up , it's FREE! =====
  • We can style our navbars using regular CSS styling properties like borders, text-align, padding, height, width, position and so on;
  • CSS allows us to create vertical and horizontal navbars;
  • To create a horizontal navbar we apply display:inline or float styling properties.

 

 

Read previous post:
CSS Dropdowns

Nobody wants their websites to be too clustered with content. To achieve a slick looking design some content has to remain...

Close