How To Add Navigation Bar in CSS

Published October 26, 2020 by Jvalant Pandya.

How To Add Navigation Bar in CSS

 

A good website is the one that provides visitors easy and quick access to information. This can be achieved by simply adding a navigation bar on your website.

What is a navigation bar? It is a part of GUI within your website that helps users to easily navigate various pages of your website. It contains links to other pages on your website.

A website without a navigation bar makes it difficult to locate various pages within the website. Navigation bar helps you to easily find pages you need. It is very important to have a navigation bar that is easy to use and attractive.

Are you looking for transforming your simple HTML navigation bar into an interesting one? Then adding CSS to your HTML code is the best way to change your simple HTML navigation bar to a good-looking navigation bar.

In our tutorial we will create navigation bar using the <ul> and <li> elements as it requires standard HTML as a base.

Here is how a good navigation bar is:

  • Simple
  • Easy to use
  • Perceptible
  • Helpful
  • Consistent

Some examples of Navigation Bar:

  • Simple Navigation Bar
  • Fixed Navigation Bar
  • Sticky Navigation Bar
  • Responsive Navigation Bar
  • Navigation Bar With Active/Current Navigation Link
  • Navigation Bar With Right-Align Links
  • Navigation Bar With Dropdown

Navigation bar is a significant part of your website which is placed on almost all webpages of your website. Navigation bars are usually placed horizontally at the top of your webpages. Sometimes it is also placed vertically on the left or right side of your webpage.

There are mainly two types of navigation bar in CSS:

  1. CSS Horizontal Navigation Bar
  2. CSS Verticle Navigation Bar

1.CSS Horizontal Navigation Bar

A Horizontal Navigation Bar is placed at the top of the website. It is usually always placed before the main content of your webpage. The horizontal navigation bar can be created using inline and floating list items.

Let us see an example of creating a horizontal navigation bar with <ul> and <li> tags, right text floating, and background color black.

Example:

<html>
<head>
<title>How to Add Horizontal Navigation Bar in CSS</title>
</head>

<body>
<ul>
  <li><a href="#aboutus">About Us</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#services">Services</a></li>
  <li><a href="#home">Home</a></li>
</ul>
</body>
</html>

CSS File will be as follows:

#ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: black;
}
#li {
  float: right;
}

#li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

 

Here’s how the output will be:

How To Add Navigation Bar in CSS

2.CSS Vertical Navigation Bar

A Vertical Navigation bar is placed on the right or left side of your webpage. Since it is placed at the side of your website it is also called Sidebar. A lot of websites use the vertical navigation bar on their webpages. Let us see an example to create a vertical navigation bar using <ul> and <li> tags, hover to display current page, and black background.

Example:

<html>
<head>
<title>
How to Add Horizontal Navigation Bar in CSS
</title>

</head>
<body>
<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#servicees">Services</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#aboutus">About Us</a></li>
</ul>
</body>

</html>

 CSS File will be as follows:

#ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: black;
}

#li a {
  display: block;
  color: white;
  padding: 8px 16px;
  text-decoration: none;
}
#li a:hover {
  background-color: #555;
  color: white;
}

Here’s how the output will look like:

How To Add Navigation Bar in CSS

 

Conclusion

In this tutorial, we learned how to add a navigation bar in CSS. We also learned what is horizontal navigation bar and vertical navigation bar in CSS and how to add them. In the above examples, we used an external CSS file to link CSS to HTML. You can do this in another by adding CSS code in your HTML file using the <style> tag.

To learn such CSS techniques, subscribe to our blog!

To see how to add forms in CSS, visit our previous article!

Share and Enjoy !

0Shares
0 0

Create Responsive Navigation Bars for Desktop and Mobile Websites

Published July 25, 2017 by saurav.roy.

With minimalist side design still on the rise, it’s sometimes easy for website visitors to get confused. Navigating a website should be easy and intuitive, and is one of the most important elements of a website. Using CSS, you can turn simple HTML menus into dynamic and aesthetically pleasing navigation bars.

Responsive Design

As the majority of people today use their mobile gadgets like cellphones and tablets to go online, it also goes without saying that your site’s design should look good on both desktops and mobile devices.

If you are new to web design and the concept of “responsive” design seems foreign to you, basically it refers to your designs ability to “flow” as you resize the screen or move to a device with a smaller width. Responsive design is built to work on both big and small screens, and this includes the navigation or menu bar visitors use to access other pages of your site.

Navigation Bar Skeleton

Just like many of our tutorials, you will have to combine HTML knowledge with CSS techniques to successfully build and design interesting websites. A navigation bar, in this case, will need a basic HTML skeleton that lists the different links you want to list.

Remember the unordered list <ul> and list item <li> HTML tags? We will use that as the skeleton.

<ul>

<li><a href="#home">Home</a></li>

<li><a href="#products ">Products</a></li>

<li><a href="#company ">Company</a></li>

<li><a href=" #contact ">Contact</a></li>

</ul>

The best part about this is that you will only need to update the CSS for changes to appear on your menu – no further tweaking in the HTML body is necessary!

Formatting the Links List

So how do we turn a simple bulleted links list into something like this?


First, using CSS (which we will either enter between the <style> tags in the <head> or in an external CSS file), we can remove the bullets and margins/padding that automatically formats a list by default:

ul {

list-style-type: none;

margin: 0;

padding: 0;

}

This code will work for both vertical and horizontal navigation bars.

Formatting into a Vertical Navigation Bar

We will now further modify the above CSS so that the <a> element will also have a customized style:

li a {

display: block;

width: 60px;

}

display: block; turns the links into block-type elements, making the entire block area clickable instead of just the text. Above, we modified only the width, but you can also modify other elements such as margin, height, padding, colors, and many other aspects.

Formatting Into a Horizontal Navigation Bar

There are two ways to modify the basic CSS to create a horizontal navigation bar – either inline or floating.

Inline Horizontal Nav Bar

When you edit the <li> element’s CSS style as in this example, you are telling the browser to get rid of the line breaks that format each list item, so they display horizontally in one line.

li {

display: inline;

}

Floating Horizontal Nav Bar

The second method of creating a horizontal navigation bar is to make the elements float:

li {

float: left;

}

 

a {

display: block;

padding: 8px;

background-color: #dddddd;

}

Using float, the individual block elements or list items will slide next to each other.

Specifying the “Active” Link

You can use a nifty CSS trick so the visitor knows which page on your site they are on:

.active {

background-color: #4CAF50;

}

The .active class is now a different color than the rest of the menu when the visitor is on a specific page of your website.

Fixed Navigation Bar

You can make the nav bar stay on the top or bottom of your page, even when the visitor scrolls the page, using one of the following codes:

For fixed top navigation bars, use:
ul {

position: fixed;

top: 0;

width: 100%;

}
For fixed bottom navigation bars, use:
ul {

position: fixed;

bottom: 0;

width: 100%;

}

Responsive Navigation Bars

You can use CSS media queries so your top or side navigation bars will become responsive and would work on mobile devices like a tablet or cellphone. Just specify the widths and heights as in the codes below.

navbar_responsive_ver
For responsive top navigation bars, use:
ul.topnav {

list-style-type: none;

margin: 0;

padding: 0;

overflow: hidden;

background-color: #333;

}

 

ul.topnav li {float: left;}

 

ul.topnav li a {

display: block;

color: white;

text-align: center;

padding: 14px 16px;

text-decoration: none;

}

 

ul.topnav li a:hover:not(.active) {background-color: #111;}

 

ul.topnav li a.active {background-color: #4CAF50;}

 

ul.topnav li.right {float: right;}

 

@media screen and (max-width: 600px){

ul.topnav li.right,

ul.topnav li {float: none;}

}
For responsive side navigation bars, use:
ul.sidenav {

list-style-type: none;

margin: 0;

padding: 0;

width: 25%;

background-color: #f1f1f1;

position: fixed;

height: 100%;

overflow: auto;

}

 

ul.sidenav li a {

display: block;

color: #000;

padding: 8px 16px;

text-decoration: none;

}

 

ul.sidenav li a.active {

background-color: #4CAF50;

color: white;

}

 

ul.sidenav li a:hover:not(.active) {

background-color: #555;

color: white;

}

 

div.content {

margin-left: 25%;

padding: 1px 16px;

height: 1000px;

}

 

@media screen and (max-width: 900px) {

ul.sidenav {

width: 100%;

height: auto;

position: relative;

}

ul.sidenav li a {

float: left;

padding: 15px;

}

div.content {margin-left: 0;}

}

 

@media screen and (max-width: 400px) {

ul.sidenav li a {

text-align: center;

float: none;

}

Conclusion

There you have it! Don’t forget to have fun experimenting with colors, borders, and other cool tricks you have learned.

Share and Enjoy !

0Shares
0 0