MyBB Community Forums

Hello.
I am stuck on adding my custom NavBar.

This is my header template;

<div align="right"><a href="{$mybb->settings['bburl']}/index.php"><img src="images/Webvolution/logo.png"/></div>
<div align="center">
<div id="rounded-wrap">
<div id="rounded-top"><span></span></div>
<div id="header_logo"><div class="logo"><a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a></div></div>	

<div id="categories_links">
<div class="navcontainer">
					<ul id="nav">
	<li><a href="#">Category 1</a>
	<li><a href="#">Category 2</a>	
<li><a href="#">Category 3</a>
<li><a href="#">Category 4</a>
	<li><a href="#">Category 5</a>	
<li><a href="#">Category 6</a>
<li><a href="#">Category 7</a>
	<li><a href="#">Category 8</a>	
					</ul>
			</div>		
				</div>
<div id="container">
<a name="top" id="top"></a>
  <hr class="hidden" />
<div id="content">
		{$welcomeblock}
			
		</div>
		<hr class="hidden" />
                <br />
		<div id="content">
			{$pm_notice}
			{$bannedwarning}
			{$bbclosedwarning}
			{$unreadreports}
<br />
<div align="right"><a href="javascript:ts('body',1)"><img src="images/Webvolution/thin.gif"/></a> <a
href="javascript:ts('body',-1)"><img src="images/Webvolution/thin.gif"/></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;	&nbsp;</div>

This is my code;

<div id="categories_links">
<div class="navcontainer">
					<ul id="nav">
	<li><a href="#">Category 1</a>
	<li><a href="#">Category 2</a>	
<li><a href="#">Category 3</a>
<li><a href="#">Category 4</a>
	<li><a href="#">Category 5</a>	
<li><a href="#">Category 6</a>
<li><a href="#">Category 7</a>
	<li><a href="#">Category 8</a>	
					</ul>
			</div>		
				</div>

I want my NavBar to look like this on this theme
> Mobile World [Theme
This is my forum up to know, with the custom navbar in the wrong place
> My Theme

Thank you.

it appears that required CSS is not applied ..

Here, go to your CSS file at bottom add:

ul#nav {
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}

li#nav {
float: left;
padding-right: 15px;
}

li a#nav {
color: #FFFFFF
}