Add Menu Header On Your Site

I think you all already know what the menu header, so I do not need to explain again. For some people may be less to like it, but for another people add menu header this would help and make the site more interesting. But, how to add them to the site? Did you know? If not i will explain how.

Not too difficult to add it on your site, just add some code and the results can be directly enjoyed, In this tutorial you will learn how to create a simple, yet effective menu header for your site. I will show you the steps on how to create it. If you have any questions, please leave a comment below.

So lets get started this fucking tutorial, but.....keep in mind, first backup your template this is to avoid the unwanted, if done, so let's continue!!


Step 1

Try to find this code, /* Header and bla...bla....bla....bla......bla.... code that ended in the code:


#header img {
margin-left: auto;
margin-right: auto;
}


Step 2

Add this code under the code, but remember the place it under the code that sought earlier,like this....


#header img { -------------->>>>> this code is the end of header code
margin-left: auto;
margin-right: auto;
}


/*- Navbar
-----------------------------*/ --------->>>>>> this code you should to add


#bg_nav {
background-image: url();
width: 900px;
height: 29px;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
color: $linkcolor;
font-weight: bold;
margin: 0px auto 0px;
padding: 0px;
border: 0px solid $titlecolor;
overflow: hidden;
}

#bg_nav a, #bg_nav a:visited {
color: $linkcolor;
font-size: 12px;
text-decoration: none;
text-transform: uppercase;
padding: 0px 0px 0px 3px;
}

#bg_nav a:hover {
font-color: $titlecolor;
text-decoration: underline;
padding: 0px 0px 0px 3px;
}

#navleft {
width: 700px;
float: left;
margin: 0px;
padding: 0px;
}

#navright {
width: 220px;
font-size: 11px;
float: right;
margin: 0px;
padding: 6px 5px 0px 0px;
}

#navbarright {
margin-right: 5px;
padding: 0px 10px 0px 10px;
}

#navright a img {
border: none;
margin: 0px;
padding: 0px;
}


#nav {
margin: 0px;
padding: 0px;
list-style: none;
}

#nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}

#nav a, #nav a:visited {
color: $titlecolor;
display: block;
font-weight: bold;
margin: 0px;
padding: 8px 15px;
border-left: 0px solid #000;
}

#nav a:hover {
color: $linkcolor;
margin: 0px;
padding: 8px 15px;
text-decoration: none;
}

#nav li {
float: left;
margin: 0px;
padding: 0px;
}

#nav li li {
float: left;
margin: 0px;
padding: 0px;
width: 150px;
}

#nav li li a, #nav li li a:link, #nav li li a:visited {
background: black;
width: 160px;
float: none;
margin: 0px;
padding: 7px 30px 7px 10px;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
}

#nav li li a:hover, #nav li li a:active { /*------edit lagi--------*/
color: green;
padding: 7px 30px 7px 10px;

}

#nav li ul {
position: absolute;
width: 10em;
left: -999em;
}

#nav li:hover ul {
left: auto;
display: block;
}

#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}


Step 3

Find this code..........!!!!!!

<div id='under_header'>
<b:section class='header' id='underheader' preferred='yes'/>
</div>

<!-- end header-wrapper -->


And add the code below exactly underneath that code


<div id='navleft'>
<div id='nav'>
<ul>

<li><a href='#'>EDIT ME</a></li>
<li><a href='#'>EDIT ME</a></li>
<li><a href='#'>EDIT ME</a></li>
<li><a href='#'>EDIT ME</a></li>
<li><a href='#'>EDIT ME</a></li>
<li><a href='#'>EDIT ME</a></li>

</ul>
</div>
</div>


Step 4

Click save template and see the result......and this is fucking end of this tutorial, enjoyed......