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:
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.
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.
list-style-type: none;property removes the bullets from the list.
background-color: #dddddd;property adds the grey color in the background.
float: left;property converts the list items into floating objects so that they can be displayed side-by-side.
padding: 8px;property adds a padding of 8 pixels to each of the elements to make their arrangement look good.
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.
li a:hoverclass specifies the color of the element when the user brings their mouse on top of the element.
background-color: #666;property in the
ulclass gives the navbar its background colour.
li aclass also has some properties that can be applied to the text in the Navbar.
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.
top: 0;, and
width: 100%;properties in the
ulclass make the navigation bar stay at the top (or bottom) of the page.
.activeclass contains the id of the tab that the user is currently on. The
background-colorproperty allows that tab to have a different color than the rest of the tabs.
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.
View all Courses