The Arcive of vBulletin Modifications Site.

Extra Navigation Bar Without Any Plugin or Mod · **Released**: 10-30-2010

Hi,

Friendz I am Here with Another Beautiful Modification
No Template Modification, Plugins, Or Mods Needed!

Modification : Navigation Bar
Method : HTM, CSS
Demo : http://www.xitclub.com/forum.php?styleid=29 ( See Top Navbar )

Installation:

1: Upload Attached File "nav_style.css" to Your Forum Root
2: Add The Following Code in header Template at very Top
header template = Admincp > Styles & Templates > Style Manager > Your Template > Edit Templates > header

Code:

<html>
<head>
<link href="nav_style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="cnavbar">
    <center>
        <div id="cnavtabs" class="cnavtabs">
        
            <ul>
                <li><a href="Your URL">Link Text</a></li>
                <li><a href="Your URL">Link Text</a></li>
                <li><a href="Your URL">Link Text</a></li>
                <li><a href="Your URL">Link Text</a></li>
                <li><a href="Your URL">Link Text</a></li>
            </ul>
        
        </div>
    </center>
</div>
</body></html>

Template Edits
If you want to change Font Colors, Backgrounds etc here i am sharing detailed template edits
Open "nav_style.css" with Dreamweaver or Code Editor in cPanel
Now Do Following Steps
1: Change The Height & Width, Background Color of NavBar

Code:

.cnavbar
{
    width:100%;
    height:32px; ( Change Height Here )
    background-color:#150517; ( Change Background Color Here )
    border-bottom:1px solid #666;
}
#cnavtabs
{
    width:960px; ( Change width Here )
    height:100%;
}

2: Change Font Normal & Hover Color

Code:

.cnavtabs ul li a 
{ 
  display:block; float:left; 
  margin:0 5px; padding:7px 0;
  color:#FFF; ( Here You Change Font Color in Normal Position )
  font:normal 13px Arial, Helvetica, sans-serif; ( Change Font Style )
  text-decoration:none; 
  font-weight:bold; ( Change Font to Normal or Bold )
}
.cnavtabs ul li a:hover 
{
  text-decoration:none; 
  color:#4AA02C; ( This Will Change Font Color on Hover )
  background-color:#302217; ( This Will Change Tab Background Color on Hover )
}

hope this will work for you also

Mark "Installed" if Its Work