Changing The Realistic Templates Navigation

If for some reason you are not happy with the JavaScript supported top navigation bar then read on.

This short tutorial will show you how to remove the JavaScript files and associated calls and will show you what HTML & CSS needs to be removed directly from the individual files.

Step 1.

Locate the "navi.css" - can be found in folder "styles".

Open the navi.css in your editor of choice and locate & remove the following code:

/* ESSENTIAL STYLES */
.nav, .nav * {
margin:0;
padding:0;
list-style:none;
}

.nav ul {
position:absolute;
top:-999em;
width:10em; /* left offset of submenus need to match (see below) */
}

.nav ul li {
width:100%;
}

.nav li:hover {
visibility:inherit; /* fixes IE7 'sticky bug' */
}

.nav li {
position:relative;
display:inline-block;
zoom:1; /* fixes IE7 Display mode */
*display:inline; /* fixes IE7 Display mode */
}

.nav a {
display:block;
position:relative;
}

.nav li:hover ul, .nav li.sfHover ul {
left:0;
top:2.5em; /* match top ul list item height */
z-index:99;
}

ul.nav li:hover li ul, ul.nav li.sfHover li ul {
top:-999em;
}

ul.nav li li:hover ul, ul.nav li li.sfHover ul {
left:10em; /* match ul width */
top:0;
}

ul.nav li li:hover li ul, ul.nav li li.sfHover li ul {
top:-999em;
}

ul.nav li li li:hover ul, ul.nav li li li.sfHover ul {
left:10em; /* match ul width */
top:0;
}

/* Default Colours */
.nav a {
padding:.75em 1em;
text-decoration:none;
background-color:#E0E0E0;
}

.nav li.active a {
color:#999999;
}

.nav a, .nav a:visited, .nav li.active li a { /* visited pseudo selector so IE6 applies text colour*/
color:#333333;
}

.nav li {
background:#E0E0E0;
}

.nav li li {
background:#E0E0E0;
}

.nav li li li {
background:#E0E0E0;
}

.nav li:hover, .nav li.sfHover, .nav a:focus, .nav a:hover, .nav a:active {
background:#C0C0C0;
}

/*** arrows **/
.nav a.sf-with-ul {
padding-right:2.25em;
}
.nav li ul a.sf-with-ul {
padding-right:1em;
}

.sf-sub-indicator {
position:absolute;
display:block;
right:.75em;
top:1.05em; /* IE6 only */
width:10px;
height:10px;
text-indent:-999em;
overflow:hidden;
background:url("../images/nav_arrows.png") no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
}

a > .sf-sub-indicator {  /* give all except IE6 the correct values */
top:.8em;
background-position:0 -100px; /* use translucent arrow for modern browsers*/
}

/* apply hovers to modern browsers */
a:focus > .sf-sub-indicator, a:hover > .sf-sub-indicator, a:active > .sf-sub-indicator, li:hover > a > .sf-sub-indicator, li.sfHover > a > .sf-sub-indicator {
background-position:-10px -100px; /* arrow hovers for modern browsers*/
}

/* point right for anchors in subs */
.nav ul .sf-sub-indicator {
background-position:-10px 0;
}

.nav ul a > .sf-sub-indicator {
background-position:0 0;
}

/* apply hovers to modern browsers */
.nav ul a:focus > .sf-sub-indicator, .nav ul a:hover > .sf-sub-indicator, .nav ul a:active > .sf-sub-indicator, .nav ul li:hover > a > .sf-sub-indicator, .nav ul li.sfHover > a > .sf-sub-indicator {
background-position:-10px 0; /* arrow hovers for modern browsers*/
}

Where the old code was removed, copy and paste the following into that space:

#topnav ul, #topnav li{
	list-style:none;
	margin:0;
	padding:0;
	}

#topnav li{
	display:inline-block;
	zoom:1; /* fixes IE7 Display mode */
	*display:inline; /* fixes IE7 Display mode */
	text-align:left;
	}

#topnav li a:link, #topnav li a:visited, #topnav li a:hover{
	display:block;
	margin:0 30px 0 0;
	padding:20px 0;
	color:#333333;
	background:#E0E0E0;
	text-transform:uppercase;
	}

#topnav li a:hover, #topnav ul li.active a{
	color:#999999;
	background:#E0E0E0;
	}
	
#topnav li li a:link, #topnav li li a:visited{
	width:150px;
	float:none;
	margin:0;
	padding:7px 10px;
	font-weight:normal;
	color:#333333;
	background:#E0E0E0;
	text-transform:none;
	border-bottom:1px solid #999999;
	}
	
#topnav li li a:hover{
	color:#999999;
	background:#E0E0E0;
	text-transform:none;
	}

#topnav li ul{
	z-index:9999;
	position: absolute;
	left: -999em;
	height:auto;
	width:170px;
	border-left:1px solid #999999;
	border-right:1px solid #999999;
	}

#topnav li ul a{width:140px;}

#topnav li ul ul{margin:-32px 0 0 0;}

#topnav li:hover ul ul{left:-999em;}

#topnav li:hover ul, #topnav li li:hover ul{left:auto;}

#topnav li:hover{position: static;}

#topnav li.last{margin:0;}

Or download this document: Realistic Default Navi Text File - right mouse click "save as" or "save link as" and rename it to "navi.css"

Step 2.

Open all of the HTML files in your editor of choice and locate & remove the following code (bottom of each page):

<script type="text/javascript" src="scripts/superfish.js"></script> <script type="text/javascript"> jQuery(function () { jQuery('ul.nav').superfish(); }); </script>

Step 3.

Still in the HTML files, locate & remove the following code:

<div id="topnav">
  <ul class="nav">
    <li class="active"><a href="index.html">Homepage</a></li>
    <li><a href="style-demo.html">Style Demo</a></li>
    <li><a href="full-width.html">Full Width</a></li>
    <li><a href="#">DropDown</a>
      <ul>
        <li><a href="#">menu item</a></li>
        <li><a href="#">menu item</a>
          <ul>
            <li><a href="#">menu item</a></li>
            <li><a href="#">menu item</a>
              <ul>
                <li><a href="#">menu item</a></li>
                <li><a href="#">menu item</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li><a href="#">menu item</a>
          <ul>
            <li><a href="#">menu item</a></li>
            <li><a href="#">menu item</a></li>
          </ul>
        </li>
        <li><a href="#">menu item</a></li>
      </ul>
    </li>
    <li><a href="portfolio.html">Portfolio</a></li>
    <li class="last"><a href="gallery.html">Gallery</a></li>
  </ul>
  <div class="clear"></div>
</div>

Replace the above code with the following:

<div id="topnav">
  <ul>
    <li class="active"><a href="index.html">Homepage</a></li>
    <li><a href="style-demo.html">Style Demo</a></li>
    <li><a href="full-width.html">Full Width</a></li>
    <li><a href="#">DropDown</a>
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
      </ul>
    </li>
    <li><a href="portfolio.html">Portfolio</a></li>
    <li class="last"><a href="gallery.html">Gallery</a></li>
  </ul>
</div>

Please note that the "active" status needs to be appended in each individual template.

An example:

To make the Style Demo page link active, replace <li class="active"> from the homepage link with "<li>" and replace the "<li>" element from the Style Demo with <li class="active">.

That's it, finished.