MyBB Community Forums

Hi everyone!

I have recently been working on my site's theme a lot and I really need help with the navbar.

I was wondering, how would I take the navbar in something like this:

[attachment=28134]

and switch it to something like the navbar in this:

http://community.mybb.com/thread-129440-...#pid952180

I have been trying to make the bar work myself and I couldn't figure out how so I came here.

Right now on my site I have a bar that has basic navigation stuff like links to User CP, Forums, Etc. but there is a few things wrong with it.

First, the alignment is off. Instead of starting at the top of the page, it has a gap in between the actual top of the page and the top of the navbar. This goes the same for the sides of the navbar also.

Second, none of the drop down boxes are working. I'm guessing this is because I'm linking the navbar's design to a css file instead of adding it to my theme's css (which I will be doing sometime soon).

Thank you for your time!

I recently made such fixed header for my forums...
You got to change the header and edit the panel templates.
Add something like left:0 and top:0 to the header and change the position to absolute or fixed if you want it fixed.
And what you wanna have is a transparent container with the width of the site area on top of the bar that holds all the content(if you are making a fixed layout).
Fiddle around in the element inspector until you got it right - that's how I do it.
Can be kind of a lengthy process when you don't know what the heck you are doing, just don't give up and maybe read up on CSS a bit.

Hope this help a little.

Can you please post a basic skeleton of your header template and it's CSS?

I'm having some issues with mine right now. I can do most of the styling myself, all I need help with is the layout of things.

Alright, no problem
header

<div id="container">
		<a name="top" id="top"></a>
		<div id="header">
			<div class="header-cont">
			<div id="logo"><a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a></div>
			<div class="menu">
				<ul>
					<li><a href="{$mybb->settings['bburl']}">Forums</a></li>
					<li><a href="{$mybb->settings['bburl']}/portal.php">News</a></li>
					<li><a href="{$mybb->settings['bburl']}/download.php">Download</a></li>
					<li><a href="{$mybb->settings['bburl']}/irc.php">IRC</a></li>
					<li><a href="{$mybb->settings['bburl']}/misc.php?action=help">Docs</a></li>
					<li><a href="https://github.com/masp/MRPG">Github</a></li>
					<li><a href="{$mybb->settings['bburl']}/about.php">About</a></li>
				</ul>
			</div>
			<hr class="hidden" />
			<div id="panel">
				{$welcomeblock}
			</div>
		</div>
			</div>
		<hr class="hidden" />
		<br class="clear" />
		<div id="content">
			<navigation>
			{$pm_notice}
			{$bannedwarning}
			{$bbclosedwarning}
			{$unreadreports}
			{$pending_joinrequests}

css

#header {
background-color:#636363;
position:fixed;
width:100%;
left:0;
top:0;
height:38px;
z-index:101;
border-bottom:1px solid #272727;
}
.header-cont {
width:1012px;
position:relative;
margin:0 auto;
}
.menu ul {
color:#000;
font-weight:700;
text-align:right;
list-style:none;
float:left;
padding:4px;
}

.menu ul a:hover,.menu ul a:active {
text-decoration:none;
background:#7E7E7E;
text-shadow:0 -1px 0 #000;
transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
-webkit-transition:all .2s ease-in-out;
padding:13px 0 12px;
}

.menu UL {
list-style:none;
margin:-27px 0 0 150px;
}

.menu LI {
display:inline;
padding-left:5px;
float:left;
margin:0 .15em;
}

.menu IMG {
padding-right:5px;
vertical-align:top;
}

Hope this helps.