Уже долго ломаю голову, но никак не получается сделать так, чтоб вертикальное меню с лого были на уровне с хедером
@font-face {
font-family: OpenSans-Bold;
src:url(fonts/OpenSans-Bold.ttf);
}
* {
padding: 0;
margin: 0;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
body {
background-color:#4c4c4c;
font-family: OpenSans-Bold,sans-serif,Arial;
padding: 87px 115px 75px 125px;
}
.wrapper {
width: 960px;
margin:0 auto;
}
header {
background-color: #00aeef;
height: 163px;
}
.header {
float:left;
margin:50px 40px 0px 30px;
}
.logo_head img { /*logo */
width: 175px;
height: 55px;
background: #1f2229;
position:fixed;
}
#menuVertical {
width: 321px;
height: 538px;
background: #1f2229;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Вертикальное меню</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class=wrapper>
<header>
<div class="header">
<h1>Заголовок страницы</h1>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Далеко-далеко за словесными горами в стране.</p>
</div>
</header>
<nav id="menuVertical">
<div class="logo_head">
<div class="logo"><a href="#"></a> </div>
</div>
<ul>
<li><a href="#1"><span>Первая ссылка</span></a></li>
<li><a href="#2"><span>Вторая ссылка(активная)</span></a></li>
<li><a href="#3"><span>Третья ссылка</span></a></li>
<li><a href="#4"><span>Личный кабинет</span></a></li>
<li><a href="#4"><span>Выйти</span></a></li>
</ul>
</nav>
<div class="menu"><div class="footer"></div></div>
</div>
</body>
</html>
flexbox
.