MyBB Community Forums

I Made a Nav Bar And How do i properly insert it to the Default Theme To Get a preview i will add an attachment To See what im working with . Also my host is 000webhost

Add it to the header template which can be found in:

Admin CP > templates and styles > templates > your theme > header templates > header

Easiest way is to save your nav bar as a PHP file and insert your file into the header as directed above. You will need the plug in that lets you use php in templates.

This way you can modify your nav bar w/o loading the template.

Use: <?php include('MENU FILE NAME'); ?>

(And thanks for your service.)

AdminCP > Templates > Your theme's templates > Header Templates > header > and paste the following code where you want menu to appear;

<ul class="menu">
  <li><a href="http://adminbb.netne.net" class="active"><span>Forums</span></a></li>
  <li><a href="http://adminbb.netne.net/misc.php?page=dwnload"><span>Downloads</span></a></li>
</ul>

The paste the following CSS styles in global.css;

.menu{margin:0 auto; padding:0; height:30px; width:100%; display:block; background:url("./images/topMenuImages.png") repeat-x;}
.menu li{padding:0; margin:0; list-style:none; display:inline;}
.menu li a{float:left; padding-left:15px; display:block; color:rgb(255,255,255); text-decoration:none; font:12px Verdana, Arial, Helvetica, sans-serif; cursor:pointer; background:url("./images/topMenuImages.png") 0px -30px no-repeat; outline:none;}
.menu li a span{line-height:30px; float:left; display:block; padding-right:15px; background:url("./images/topMenuImages.png") 100% -30px no-repeat;}
.menu li a:hover{background-position:0px -60px; color:rgb(255,255,255);}
.menu li a:hover span{background-position:100% -60px;}
.menu li a.active, .menu li a.active:hover{line-height:30px; font:12px Verdana, Arial, Helvetica, sans-serif; background:url("./images/topMenuImages.png") 0px -90px no-repeat; color:rgb(255,255,255);}
.menu li a.active span, .menu li a.active:hover span{background:url("./images/topMenuImages.png") 100% -90px no-repeat;}

Then copy paste the images in ./images/ folder of your forum.