CSS - Navigation Bar

CSS Navigation Bar

Navigation bars in CSS is yet another important topic in Cascading Style Sheets concept. In today’s topic, our focus is on how to use navigation bars of CSS. Besides this, for a website, or a web page, navigation is important. But at the same time you must see that these navigation bars are user friendly. Keep reading to know more about CSS navigation bars.

List of links for navigation bar

Essentially, navigation bar has HTML as base. Furthermore, we can say that navigation bar is list of links. Therefore, you can use <li> and <ul>.

Example for vertical navigation bar

For the vertical navigation bar, styling of <a> elements in a list is important.

Active or current navigation link example

In fact, current navigation link is a very helpful tool. When you add active class to current link, user will know as to which page they are reading.

Syntax for addition of center link

To add center link, you must add following syntax → text-align:center to <a> or <li>. On the other hand, you may even add border property to <ul> and <li> elements. You can change border bottom with <ul> and <li>. Syntax for border bottom is → border-bottom: px color.

Full height vertical navigation bar

There is one thing that we must remember about full-height fixed vertical navbar. It is that this navbar may not be able to work in a correct manner in mobile phones.

How to create horizontal navigation bar?

In order to create horizontal navigation bars, you may use either floating or inline list items. Continue reading to know more about it.

Use of floating list items

Creation of horizontal navigation bar is possible when floating <li> elements is done. You must keep it in mind that you may use ‘float’ to have block elements slide each other. Besides this, addition of background color to <ul> would be good. Because, in this way, full-width background color is possible.