2 navigations in header

Here is my HTML code:

<header>
	<div class="container clearfix" id="header_wrap">		
		<a href="#"><img src="images/logo.png" alt="logo" id="logo"></a>

		<div id="tel">
			<p>Contact us by the telephone number below</p>
			<p class="tel_no">01657 049 865</p>
		</div>

		<nav id="pages" class="clearfix">
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">About</a></li>
				<li><a href="#">Donate</a></li>
				<li><a href="#">Video</a></li>
				<li class="last"><a href="#" class="last">Contact</a></li>
			</ul>
		</nav>	<!-- end pages -->

		<nav id="menu" class="clearfix">
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">Donate</a></li>
				<li><a href="#">About</a></li>
				<li><a href="#">Tour</a></li>
				<li><a href="#">Nature</a></li>
				<li><a href="#">Tips</a></li>
				<li><a href="#">Contact</a></li>
			</ul>
		</nav>	<!-- end menu -->
	</div>
</header> <!-- end header -->

CSS code

#header_wrap{
	position: relative;

	#tel{
		position: absolute;
		right: 0;
		top: 10px;

		p{

		}
	}
}

#logo{
	float: left;
	display: block;
}

/* Navigation */

#pages{
	float: right;

	ul{
		margin-top: 70px;

		li{
			float: left;
			margin-right: 5px;

			a{
				color: @link-color;
				display: block;
				padding: 0 10px;
				font-weight: bold;
				.transition();

				&:hover{
					background: @border;
					color: @light-color;
					.round();
				}			
			}
		}
	}
}

#menu{
	ul{
		margin-top: 107px;
		.round();
		background: white;
		border: 1px solid #0c932f;

		li{
			float: left;
		}
	}
}

Why pages and logo work with float very well but if i setting float for menu, it will like this:

Otherwise:

Hi,

Can you post the pure CSS as I don’t understand Less (or whatever that code above is).

From your drawing it looks like you are giving 100% width to the floated list items somewhere.

here is my pure css

#header_wrap {
  position: relative;
}
#header_wrap #tel {
  position: absolute;
  right: 0;
  top: 10px;
}
#header_wrap #tel a {
  float: right;
  font-size: 20px;
  font-weight: 600;
  cursor: pointer;
  -webkit-transition: color 0.2s ease-out;
  -moz-transition: color 0.2s ease-out;
  -ms-transition: color 0.2s ease-out;
  -o-transition: color 0.2s ease-out;
  transition: color 0.2s ease-out;
}
#header_wrap #tel a:hover {
  text-decoration: underline;
  color: #209a28;
}
#main-content {
  margin-top: 33px;
}
/* Navigation */
#pages {
  float: right;
}
#pages ul {
  margin-top: 70px; 
}
#pages ul li {
  float: left;
  margin-right: 5px;
}
#pages ul li a {
  color: #209a28;
  display: block;
  padding: 0 10px;
  font-weight: bold;
  -webkit-transition: color 0.2s ease-out;
  -moz-transition: color 0.2s ease-out;
  -ms-transition: color 0.2s ease-out;
  -o-transition: color 0.2s ease-out;
  transition: color 0.2s ease-out;
}
#pages ul li a:hover {
  background: #cacaca;
  color: #ffffff;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
#menu ul li{
float: left;
}
#menu ul li a {
  display: block;
  padding: 0 20px;
  color: #ffffff;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 15px;
  height: 41px;
  line-height: 41px;
  -webkit-transition: color 0.2s ease-out;
  -moz-transition: color 0.2s ease-out;
  -ms-transition: color 0.2s ease-out;
  -o-transition: color 0.2s ease-out;
  transition: color 0.2s ease-out;
}
#menu ul li a:hover {
  color: #00c0ff;
}

It’s not clear from your code what you are asking. This is how to post a proper code sample:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

#header_wrap {
  position: relative;
}
#header_wrap #tel {
  position: absolute;
  right: 0;
  top: 10px;
}
#header_wrap #tel a {
  float: right;
  font-size: 20px;
  font-weight: 600;
  cursor: pointer;
  -webkit-transition: color 0.2s ease-out;
  -moz-transition: color 0.2s ease-out;
  -ms-transition: color 0.2s ease-out;
  -o-transition: color 0.2s ease-out;
  transition: color 0.2s ease-out;
}
#header_wrap #tel a:hover {
  text-decoration: underline;
  color: #209a28;
}
#main-content {
  margin-top: 33px;
}
/* Navigation */
#pages {
  float: right;
}
#pages ul {
  margin-top: 70px; 
}
#pages ul li {
  float: left;
  margin-right: 5px;
}
#pages ul li a {
  color: #209a28;
  display: block;
  padding: 0 10px;
  font-weight: bold;
  -webkit-transition: color 0.2s ease-out;
  -moz-transition: color 0.2s ease-out;
  -ms-transition: color 0.2s ease-out;
  -o-transition: color 0.2s ease-out;
  transition: color 0.2s ease-out;
}
#pages ul li a:hover {
  background: #cacaca;
  color: #ffffff;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
#menu ul li{
float: left;
}
#menu ul li a {
  display: block;
  padding: 0 20px;
  color: #ffffff;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 15px;
  height: 41px;
  line-height: 41px;
  -webkit-transition: color 0.2s ease-out;
  -moz-transition: color 0.2s ease-out;
  -ms-transition: color 0.2s ease-out;
  -o-transition: color 0.2s ease-out;
  transition: color 0.2s ease-out;
}
#menu ul li a:hover {
  color: #00c0ff;
}

</style>
</head>
<body>

<header>
	<div class="container clearfix" id="header_wrap">		
		<a href="#"><img src="images/logo.png" alt="logo" id="logo"></a>

		<div id="tel">
			<p>Contact us by the telephone number below</p>
			<p class="tel_no">01657 049 865</p>
		</div>

		<nav id="pages" class="clearfix">
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">About</a></li>
				<li><a href="#">Donate</a></li>
				<li><a href="#">Video</a></li>
				<li class="last"><a href="#" class="last">Contact</a></li>
			</ul>
		</nav>	<!-- end pages -->

		<nav id="menu" class="clearfix">
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">Donate</a></li>
				<li><a href="#">About</a></li>
				<li><a href="#">Tour</a></li>
				<li><a href="#">Nature</a></li>
				<li><a href="#">Tips</a></li>
				<li><a href="#">Contact</a></li>
			</ul>
		</nav>	<!-- end menu -->
	</div>
</header> <!-- end header -->
			
</body>
</html>

That way, it’s easy for us to test your code. Perhaps set up your code so it demonstrates the problem, and post a code example like I just have, or post an example at at site like CodePen.

Here’s a thread that lists your options: http://www.sitepoint.com/forums/showthread.php?1041498-Forum-Posting-Basics

thank you for information. Hope you help me to solve my problem :slight_smile:

As I said, I don’t think the code you posted demonstrates the problem. Your code doesn’t do what you posted in the screen shot.

here please check my code at codepen, thank you

http://codepen.io/anon/pen/yteKE

OK, so what do you want help with? What’s not working for you in that layout?

it must be like this but i don’t know i can’t do it. They use position but i’m using float instead.

http://www.izwebz.com/wp-content/uploads/tommy/demo-nature-layout/css/header.html

O, I see. Add this to your styles:

#menu {
  overflow: hidden;
}

That will force the UL to wrap around the floated LIs. Then you will see the background. :slight_smile:

i tried by adding class clearfix to #menu, it work well :slight_smile: