[wiserfild]

html

<header id="header">
        <div class="logo">
           <a href="#" class="font1"><span style="color: #ffffff">ДЕМО</span><span style="color: #cfc91d">САЙТ</span></a>
        </div>

<div id="message">

        <a href="#" id="touch-menu">МЕНЮ</a>
        <nav>
            <ul class="nav">
                <li><a href="#about">ОБО МНЕ</a></li>
                <li><a href="#service">УСЛУГИ</a></li>
                <li><a href="#facts">ФАКТЫ</a></li>
                <li><a href="#contacts">КОНТАКТЫ</a></li>               
            </ul>
        </nav>
</div>

    </header>

css

header {
	background: #02918c;
	width: 100%;
	z-index: 9999;
	position: fixed;
	height: 60px;

}
.logo {float: left;
	font-size: 26px;
	line-height: 60px;
	margin-left: 88px;
	font-family: "Open Sans";}
.nav {float: right;}
.nav {margin-right: 22px;}
.nav li {float: left;}
.nav li a,
#touch-menu {
	display: block;
	font-weight: bold;
	color: #fff;
	line-height: 60px;
	padding: 0 22px;

}
.nav li a:hover, #touch-menu:hover
 {
	background: #28a19d;
	}

#touch-menu {display: none;}

@media (max-width: 1000px) {
	body {padding-top: 60px}
	header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 60px;
	}
	.logo {
		font-size: 18px;
		line-height: 60px;
		margin-left: 20px;
	}
	.nav {
		position: absolute;
		top: 100%;
		left: 50%;
		right: 0;
		display: none;
		width: 50%;

	}
	.nav li {float: none;}
	.nav li a {
		color: #ffffff;
		background: #02918c;
		text-align: center;
	}
	.nav li:first-child a {border-top: none;}
	.nav li a:hover {
		color: #ffffff;
		background: #28a19d;
	}
	#touch-menu {
		display: block;
		float: right;
		height: 60px;
		padding: 0 20px;
		line-height: 60px;
		/*margin-right: 20px;*/
	}