Navigation Bar

In this tutorial, I will be showing you how to create navigation bar.

Basic navigation bar comprises of Home, About, Services and Contact. There are two (2) types of navigation bar: Vertical and Horizontal

Vertical Navigation Bar

STEP 1 (Code the HTML) - Here we are using underordered list and anchor element.

TRY IT OUT YOURSELF

STEP 2 (Code the CSS) - Here we are using embedded styling method to add our CSS.

TRY IT OUT YOURSELF

STEP 3 - Make a hover effect and make the home menu to be active.

TRY IT OUT YOURSELF

STEP 4 - You can make the hover effect not to be applied to the home by changing the code.

TRY IT OUT YOURSELF

STEP 5 - You can add other styling as wish such as: font-family, font-variant, transition, etc.

TRY IT OUT YOURSELF

STEP 1 (Code the HTML) - Here we are using underordered list and anchor element.

TRY IT OUT YOURSELF

STEP 2 (Code the CSS) - Here we are using embedded styling method to add our CSS.

TRY IT OUT YOURSELF

STEP 3 - Make a hover effect and make the home menu to be active.

TRY IT OUT YOURSELF

STEP 4 - You can make the hover effect not to be applied to the home by changing the code.

TRY IT OUT YOURSELF

STEP 5 - You can add other styling as wish such as: font-family, font-variant, transition, etc.

TRY IT OUT YOURSELF

To move a particular link to the right, simply add the style below.

TRY IT OUT YOURSELF

To make navigation bar stay fixed at the top while scrolling down the page, simple style below

TRY IT OUT YOURSELF

To make navigation bar stay fixed at the bottom while scrolling down the page, simple style below

TRY IT OUT YOURSELF

To make navigation bar sticky, simply add the style below.

TRY IT OUT YOURSELF