Live Navigation in HTML

How to Repurpose the Code to add live navigation to multiple pages of your document. 

Download: LIVE_NAV_SOURCE_FIES 2_column_template_with Navigation_practice

How to create a very basic live navigation in HTML (part 01)

How to create a very basic live navigation in HTML (part 02)

How to create a very basic live navigation in HTML (part 03)

How to create a very basic live navigation in HTML (part 04)

Live Navigation and Repeating html background Source Files


 This Code should go into the HEAD tag of your page.

<style type=”text/css”>
ul {
list-style-type: none;
margin-top: 30px;
margin-right: 5px;
margin-left: 5px;
margin-bottom: 5px;


li a {
display: block;
width: 5px;
margin-left: 50px;
color: #523F24;
font-style: normal;
font-family: “Gill Sans”, “Gill Sans MT”, “Myriad Pro”, “DejaVu Sans Condensed”, Helvetica, Arial, sans-serif;



This code should go into the HEADER tag of your website. The HEADER tag is inside the BODY tag of your page. Don’t confuse it with the HEAD tag.

<div id=”header”>
<li><a href=”#”>HOME </a>
<a href=”#”>ABOUT </a>
<a href=”#”>CONTACT</a></li>



Positioning Live Navigation on HTML Pages

Creating a Selected State For Live Navigation


1- Copy and paste the rule below to your CSS document.

.active a {

color: rgba(15,179,183,1.00);

text-decoration: none;


( you can modify the rule later to match your design)

2- To add a selected state to your button on the HTML page, copy: 

<li class=’active’><a href=’index.html’>Home</a></li> and apply the code to the selected state for another button.

For example to add a selected state to ABOUT page,  Replace: <li><a href=”about.html”>About</a></li>

WITH <li class=’active’><a href=‘about.html’>About</a></li>



<li class=’active’><a href=’index.html’>Home</a></li>

<li><a href=”about.html”>About</a></li>

<li><a href=”portfolio.html”>



<li><a href=”webdesign.html”>Web Design</li>

<li><a href=”motion.html”>Motion Design</li>

<li><a href=”photo.html”>Photography</li>



<li><a href=”blog.html”>Blog</a></li>

<li><a href=”contact.html”>Contact</a></li>





CSS Menu Maker Tutorial


Live nav and WOW Slider Gallery Tutorial



Code for basic navigation with CSS and HTML

EXTERNAL CSS CODE: ( you can copy and paste in a new CSS document

#navigation {


#navigation li a {

padding-right: 39px;


ul {

list-style-type: none;


li {

display: inline-block;


HTML CODE ( you can copy and paste in a new html document.

<!doctype html>



<meta charset=”UTF-8″>

<title>Untitled Document</title>

<link href=”file:///hard drive/Users/ezenhari/Desktop/untitled folder/navigation.css” rel=”stylesheet” type=”text/css”>




<div id=”navigation”>

<li><a href=”index.html”>home </a><a href=”gallery.html”>gallery </a><a href=”contact.html”>contact</a></li>






Leave a Reply

Your email address will not be published. Required fields are marked *