So close just need basic css styling help with header, anyone up?

HTML & CSS
1

Hey all,

I am trying to style this code to look like the picture I’ve attached, like it does on the rest of my WordPress site. This is a header above a Vanilla forum installation.

But I’m a total newbie at this and none of the CSS I use really works. It’s displaying centered right now with the links ‘kinda’ over to the right like I want, but I want it all even and looking nice like the rest of my site.

Would anyone be able to show me what’s wrong with my code or where I put styling elements to make it look like the picture I’ve attached?

The website is ne1up.com/chat if you want to see what I’m talking about, but please don’t click elsewhere, it’s an adult-only website. I’ve attached a picture of what my navbar header looks elsewhere.

Thank you SO much for any help.

<div id="topmenu" class="navbar navbar-fixed-top">

		<div class="navbar-inner">
<div class="container" style="background:#000;color:#fff;position:relative;
left:-20px;">				<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
					<i class="icon-bar"></i>
					<i class="icon-bar"></i>
					<i class="icon-bar"></i>
				</a>

								<a class="brand logo" style="position:relative;
left:-20px;;" href="http://ne1up.com/"><img src="http://ne1up.com/wp-content/uploads/2013/06/alogo2.png" alt="Logo"</a>

				<nav id="nav-main" class="nav-collapse" role="navigation">
										
					<form class="navbar-search pull-right" style="float:right;margin:5px;" method="get" id="searchform" action="http://ne1up.com/">
						<input type="text" class="search-query" placeholder="Search" name="s" id="s" value="">
					</form>
					
					<a style="color:#fff;float:right;margin:5px;" rel="nofollow" href="http://ne1up.com/favorites" title="My Favorites" class="topmenu-social pull-right">My Favorites<i class="icon-heart icon-large"></i></a>

<a style="color:#fff;float:right;margin:5px;" rel="nofollow" href="http://ne1up.com/wp-login.php" title="Add Your Link" class="simplemodal-login topmenu-social pull-right">Add Your Link
<i class="icon-heart icon-large"></i></a>
<a style="color:#fff;float:right;margin:5px;" rel="nofollow" href="http://ne1up.com/chat" title="Online Chat" class="topmenu-social pull-right">Online Chat
<i class="icon-heart icon-large"></i></a>
<br>
				</nav>
			</div>
		</div>
	</div>
2

Hi,

It’s a little hard to style this without the full code as you have elements in there without rules applied to them but based on the above code you would need a rough structure like this:


	<div class="container">
						<div class="head-left"><a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <i class="icon-bar"></i> <i class="icon-bar"></i> <i class="icon-bar"></i> </a> <a class="brand logo" href="http://ne1up.com/"><img src="http://ne1up.com/wp-content/uploads/2013/06/alogo2.png" alt="Logo"></a></div>
						<nav id="nav-main" class="nav-collapse" role="navigation">
								<form class="navbar-search pull-right"  method="get" id="searchform" action="http://ne1up.com/">
										<div>
												<input type="text" class="search-query" placeholder="Search" name="s" id="s" value="">
										</div>
								</form>
								<ul class="nav2">
										<li><a rel="nofollow" href="http://ne1up.com/favorites" title="My Favorites" class="topmenu-social pull-right">My Favorites<i class="icon-heart icon-large"></i></a></li>
										<li><a rel="nofollow" href="http://ne1up.com/wp-login.php" title="Add Your Link" class="simplemodal-login topmenu-social pull-right">Add Your Link <i class="icon-heart icon-large"></i></a></li>
										<li><a rel="nofollow" href="http://ne1up.com/chat" title="Online Chat" class="topmenu-social pull-right">Online Chat <i class="icon-heart icon-large"></i></a></li>
								</ul>
						</nav>
				</div>

With css like this (don’t use inline css as that is too awkward to manage):


<style type="text/css">
.container:after {
	content:" ";
	display:block;
	clear:both;
	height:0;
	overflow:hidden;
}
.container {
	background:#000;
	color:#fff;
	position:relative;
	line-height:38px;
	min-height:38px;
	zoom:1.0;
}
.head-left {
	float:left;
	margin:0 0 0 20px;
	padding:0 20px 0 0;
	border-right:1px solid #fff;
}
.head-left a, .head-left img { float:left }
.navbar-search {
	float:right;
	margin:0 100px 0 0;
}
.navbar-search input {
	margin:-2px 5px 0;
	vertical-align:middle;
}
.nav2 {
	margin:0;
	padding:0;
	list-style:none;
}
.nav2 li { float:right }
.nav2 a {
	color:#fff;
	float:right;
	margin:0 5px
}
.nav2 a:visited { color:#fff }
.nav2 a i {
	display:inline-block;
	vertical-align:middle
}
</style>
3

Thank you SO much for your time in that reply, Paul!

I had basically just tried to copy/paste. :expressionless: Had figured that wouldn’t work but figured it would give me a starting point since I don’t know what I’m doing. :slight_smile:

I’m going to work some more on this as soon as my daughter is done monopolizing my computer just wanted to thank you a lot for your time and effort answering my question!