How to create a Navbar using CSS

A navigation bar (also called a Navbar) is a user interface element within a webpage that contains links to other sections of the website. In most cases, the navigation bar is part of the main website template, which means it is displayed on most, if not all, of the pages within the website.

There are several ways to incorporate a Navbar in your website including:

• React Navbar
• Bootstrap Navbar
• CSS Navbar

Displaying navbar using CSS

With CSS, boring HTML menus can be transformed into good-looking navigation bars. This shot will explain how to build a basic navigation bar using CSS.

We will start with a list of links that will form the basis of our navigation bar. CSS properties will then be applied to this list to give it the look and feel of a Navigation Bar.

Ordering the list horizontally

To display the list horizontally, convert the list elements to floating objects. Also, add color to the list div to give it the look and feel of a Navbar.

• The list-style-type: none; property removes the bullets from the list.
• The background-color: #dddddd; property adds the grey color in the background.
• The float: left; property converts the list items into floating objects so that they can be displayed side-by-side.
• The padding: 8px; property adds a padding of 8 pixels to each of the elements to make their arrangement look good.

Adding a hover-over effect in the Navbar

Next, add a hover-over effect on the elements in the Navbar so that their color will change when a user brings their cursor over them.

• The li a:hover class specifies the color of the element when the user brings their mouse on top of the element.
• The background-color: #666; property in the ul class gives the navbar its background colour.
• The li a class also has some properties that can be applied to the text in the Navbar.

Positioning the Navbar with bordered tabs

Next, we will fix the Navbar’s position to the top of the page. We will also add a border around the tabs to give​ them a more structured look.

• The position: fixed;, top: 0;, and width: 100%; properties in the ul class make the navigation bar stay at the top (or bottom) of the page.
• The .active class contains the id of the tab that the user is currently on. The background-color property allows that tab to have a different color than the rest of the tabs.
• The border-right: 1px solid #bbb; property is added to the tabs to display a white border between the tabs.

A lot more customizations can be done on this Navbar using CSS. These customizations include: adding drop-downs, search bars, and even a sticky navigation bar through various CSS properties that can make the bar even more useful and attractive.