How to create and design a navigation bar in CSS?

HTML

Here we have created some list items and nested a few anchor tags inside the

CSS

By default

elements should be given a margin and padding of 0px, and the list style type should be set to none. Lastly, we have designed the anchor tags according to our desire.

Output

<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/word-image-66.png" data-lazy- height="47" src="data:image/svg xml,” width=”632″>

A horizontal navigation bar was created using inline list items.

Creating a navigation bar using div

Let’s explore how to make a horizontal navigation bar using div.

HTML

<div class=“topnav”>

<a class=“active” href=“#home”>Home</a>

<a href=“#about”>About</a>

<a href=“#services”>Services</a>

<a href=“#contactus”>Contact Us</a>

</div>

In the above HTML code, we have created a div and we have assigned it the topnav class. Inside that div, we have nested four anchor tags and the first anchor tag has been given the class active which enables the user to know which section he/she is on.

CSS

body {

margin: 0;

}

.topnav {

background-color: gray;

overflow: hidden;

}

.topnav a {

float: left;

color:white;

text-align: center;

padding: 15px 18px;

text-decoration: none;

font-size: 17px;

}

.topnav a:hover {

background-color: ghostwhite;

color: black;

}

.topnav a.active {

background-color: salmon;

color: white;

}

The topnav class is used to add a background color to the whole navigation bar. We then styled the links present inside the div container according to our requirements. Moreover, we have added the styling for hover and active effect on the navigation link.

Output

<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/word-image-68.png" data-lazy- height="78" src="data:image/svg xml,” width=”626″>

Using the div and tag, we have successfully created a horizontal navigation bar.

More About Horizontal Navigation Bar!

There are a few more fun things that you can add to your navigation bar, let’s explore them.

How to float a link to the right in a navigation bar

One interesting thing that you can do is that you can float a link present inside the navigation bar to the right if you want. Set the float property of that particular link to the right and see the change.

<div class=“topnav”>

<a href=“#home”>Home</a>

<a href=“#about”>About</a>

<a href=“#services”>Services</a>

<a class=“active” style=“float: right;” href=“#contactus”>Contact Us</a>

</div>

Here we have set the float property of the last anchor tag to right and moreover assigned it an active class.

Output

<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/word-image-71.png" data-lazy- height="82" src="data:image/svg xml,” width=”623″>

A link was floated to the right successfully.

How to create a top fixed navigation bar

In order to fix the navigation bar to the top, give the div container a fixed position and some width.

HTML

<div class=“topnav”>

<a class=“active” href=“#home”>Home</a>

<a href=“#about”>About</a>

<a href=“#services”>Services</a>

<a href=“#contactus”>Contact Us</a>

</div>

<div class=“content”>

<p>Some content.</p>

<p>Some content.</p>

<p>Some content.</p>

<p>Some content.</p>

<p>Some content.</p>

<p>Some content.</p>

<p>Some content.</p>

<p>Some content.</p>

<p>Some content.</p>

<p>Some content.</p>

</div>

To show to the working of a fixed top navigation bar we have created a palenty of content to demonstrate the fixed navigation bar.

CSS

.topnav {

background-color: gray;

overflow: hidden;

position: fixed;

top: 0;

width: 100%;

}

.content {

padding:20px;

height: 1000px;

}

We are assigning the navigation bar a fixed position and a width 100%. Furthermore, we are setting the top to 0px.

Output

<img data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/word-image-4.gif" height="206" src="data:image/svg xml,” width=”615″>

A fixed top navigation bar was created successfully.

How to create a bottom fixed navigation bar

You can also create a fixed bottom navigation bar. Here is how you do it.

CSS

.topnav {

background-color: gray;

overflow: hidden;

position: fixed;

bottom: 0;

width: 100%;

}

Here besides giving the navigation bar a fixed position, the bottom has been set to 0px.

Output

<img data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/word-image-5.gif" height="206" src="data:image/svg xml,” width=”615″>

The fixed bottom navigation bar is working properly.

How to create a sticky navigation bar

For the purpose of creating a sticky navigation bar use the sticky value of the CSS position property.

CSS

.topnav {

background-color: gray;

overflow: hidden;

position: sticky;

top: 0;

}

Here we have set the position of the navigation bar to sticky.

Output

<img data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/word-image-6.gif" height="278" src="data:image/svg xml,” width=”614″>

A sticky navigation bar was created successfully.

Vertical Navigation Bar

For the purpose of creating a vertical navigation bar, all you have to do is set the display of the links inside the navigation bar to block using the CSS display block property.

CSS

.topnav a {

display: block;

color:white;

text-align: center;

padding: 15px 18px;

text-decoration: none;

font-size: 17px;

}

The anchor tags are being displayed as block-level elements to create a vertical navigation bar.

Output

<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/word-image-72.png" data-lazy- height="266" src="data:image/svg xml,” width=”620″>

A vertical navigation bar was created successfully.

How to align the vertical navigation bar

To align your vertical navigation bar you can float it to your desired position along with giving it some width.

CSS

.topnav {

background-color: gray;

width: 30%;

float: right;

overflow: hidden;

}

Here we are setting the float property of the right and giving the div a width of 30%.

Output

<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/word-image-73.png" data-lazy- height="261" src="data:image/svg xml,” width=”626″>

The vertical navigation bar was floated to the right.

Conclusion

A navigation bar plays an vital part in boosting the user experience of a website, therefore, you can make a pleasant-looking navigation bar by using various approaches. For creating a horizontal navigation bar you can use either HTML list items or combination of div and tag in CSS. You can do many fun things with your navigation bar such as, floating a link to the right, make it a fixed navigation bar, or make it a sticky one as per your requirements. Besides this, you can also create a vertical navigation bar by displaying links as block-level elements. This post guides you all about creating and designing a navigation bar.