MyBB Community Forums

Full Version: Navigation Menu
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2
I've been trying to add my user nav into my main navigation bar, floating to the right.
But when I try to code it in my header template, it seems to be no were near where I want it.
Here's what I get.

Image:
http://i.imgur.com/FOAgebd.png

What I'm trying to go for:
http://i.imgur.com/jAUg2cf.png
Have you tried using the following CSS?

display: inline;
Yes, this didn't work.
Adding display: inline-block; to that element and .newnavbar should work. Also, add the element inside the .wrapper div.
Hmm. Nope. Here's my code:

<div id="container">
		<a name="top" id="top"></a>
		<div id="header">
			<div id="logo">
				<div class="wrapper">
					<a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" width="301" height="129"/></a>
					{$quicksearch}
				</div>
   					<ul class="menu top_links">
						<div class='wrapper'>
			                      	<div class="newnavbar">
                                                <li><a href="{$mybb->settings['bburl']}/portal.php">
<img src="http://i.imgur.com/sMNzshI.png" width="15" height="15" alt="Home"/>&nbsp;Home</a></li>
                                                <li><a href="{$mybb->settings['bburl']}/forums.php">
<img src="{$mybb->settings['bburl']}/images/forums.png" width="15" height="15" alt="Forums"/>&nbsp;Forums</a></li>
						<li><a href="{$mybb->settings['bburl']}/memberlist.php">
<img src="{$mybb->settings['bburl']}/images/members.png" width="15" height ="15" alt="Members"/>&nbsp;Members</a></li>
						<li><a href="{$mybb->settings['bburl']}/premium.php">
<img src="{$mybb->settings['bburl']}/images/premium1.png" width="15" height="15" alt="Premium"/>&nbsp;Premium</a></li>
<ul class="dropit">
	<li>
		<li><a href="{$mybb->settings['bburl']}/portal.php"><img src="{$mybb->settings['bburl']}/images/arrow_down.png" width="12" height="10" alt="Extras"/>&nbsp;Extras</a></lil>
        <ul>
            <li><a href="{$mybb->settings['bburl']}/showteam.php">Staff Team</a></li>
			<li><a href="{$mybb->settings['bburl']}/ranks.php">Site Ranks</a></li>
			<li><a href="{$mybb->settings['bburl']}/showthread.php?tid=7">Forum Rules</a></li>
                       <li><a href="{$mybb->settings['bburl']}/contact-us.php">Contact Us</a></il>
			{$admincplink}
        </ul>
    </li>
</ul>
   </ul>     			
</div>
		<ul class="dropit">
	<li>
		<a href="#">Welcome back, {$mybb->user['username']}.&nbsp;</a><img src="{$mybb->settings['bburl']}/images/arrow_down.png" width="12" height="10"/>&nbsp;
        <ul>
            <li><a href="{$mybb->settings['bburl']}/usercp.php">Account Settings</a></li>
			<li><a href="{$mybb->settings['bburl']}/{$mybb->user['username']}">My Profile</a></li>
			<li><a href="{$mybb->settings['bburl']}/member.php?action=logout&amp;logoutkey={$mybb->user['logoutkey']}" class="logout">Log Out</a></li>
                       <li> {$modcplink}</li>
			{$admincplink}
        </ul>
    </li>
</ul>
<myalerts_headericon>
</div></div></div>
		<div id="content">
			<div class="wrapper">
				<div class="user_nav">
						{$welcomeblock}
						<!-- </div> in header_welcomeblock_member and header_welcomeblock_guest -->
						<!-- </div> in header_welcomeblock_member and header_welcomeblock_guest -->
				</div>
				{$bannedwarning}
				{$myprofile_alertbar}
				<navigation>
<div class="forumborder"></div>
It's not inside the .wrapper div though (edited my post just before you posted).
Hmm. Tried that and removed it because it mucked up more of the site. Does the above code look correct to you?
I just tested it with the inspect element tool and it worked fine for me: https://docs.google.com/file/d/0B6pgReiH...p=drivesdk (except that the dropdown is too wide in that case and the log out link will move to a line with another item).

Once again, all required steps:
1. Add display: inline-block; to the .newnavbar selector in custom.css
2. Move the whole dropdown <ul> to the end of the .wrapper div (so right before its closing </div>)
3. Add float: right; and display: inline-block; to the <ul> you moved.
Maybe I'm just being stupid but I can't get this to work. Could you possibly do this for me?
Well, one needs to be very careful when playing with HTML code. Proper indendation helps with noticing errors like these: http://validator.w3.org/check?uri=http%3...ne&group=0 which may make adding new things a lot harder. Especially the "end tag for .. omitted" and "end tag for ... which is not open" which caused problems in this case too - there were two closing </ul> next to eachother which broke it. I fixed this for you because it wasn't that hard to spot but you may encounter other more annoying issues in the future, so I suggest taking care of that.
Pages: 1 2