Пробую выровнять по вертикали элементы(Навигационное меню) при помощи добавления псевдо-элемента.
Проблема в том, что сверху родителя псевдоэлемента( .header__header-top
) появляется лишнее пространство. Какие есть варианты исправить это?
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Gotham Pro', sans-serif;
}
html {
font-size: 16px !important;
}
@font-face {
font-family: 'Gotham Pro';
src: url('../fonts/GothamPro-Bold.eot');
src: url('../fonts/GothamPro-Bold.eot?#iefix') format('embedded-opentype'), url('../fonts/GothamPro-Bold.woff2') format('woff2'), url('../fonts/GothamPro-Bold.woff') format('woff'), url('../fonts/GothamPro-Bold.ttf') format('truetype'), url('../fonts/GothamPro-Bold.svg#GothamPro-Bold') format('svg');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'Gotham Pro';
src: url('../fonts/GothamPro.eot');
src: url('../fonts/GothamPro.eot?#iefix') format('embedded-opentype'), url('../fonts/GothamPro.woff2') format('woff2'), url('../fonts/GothamPro.woff') format('woff'), url('../fonts/GothamPro.ttf') format('truetype'), url('../fonts/GothamPro.svg#GothamPro') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Gotham Pro';
src: url('../fonts/GothamPro-Medium.eot');
src: url('../fonts/GothamPro-Medium.eot?#iefix') format('embedded-opentype'), url('../fonts/GothamPro-Medium.woff2') format('woff2'), url('../fonts/GothamPro-Medium.woff') format('woff'), url('../fonts/GothamPro-Medium.ttf') format('truetype'), url('../fonts/GothamPro-Medium.svg#GothamPro-Medium') format('svg');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'Gotham Pro';
src: url('../fonts/GothamPro-Light.eot');
src: url('../fonts/GothamPro-Light.eot?#iefix') format('embedded-opentype'), url('../fonts/GothamPro-Light.woff2') format('woff2'), url('../fonts/GothamPro-Light.woff') format('woff'), url('../fonts/GothamPro-Light.ttf') format('truetype'), url('../fonts/GothamPro-Light.svg#GothamPro-Light') format('svg');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'Font Awesome 5 Free';
font-style: normal;
font-weight: 400;
src: url("../fonts/fa-regular-400.eot");
src: url("../fonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("../fonts/fa-regular-400.woff2") format("woff2"), url("../fonts/fa-regular-400.woff") format("woff"), url("../fonts/fa-regular-400.ttf") format("truetype"), url("../fonts/fa-regular-400.svg#fontawesome") format("svg");
}
.header__header-top {
background-color: #0c0f17;
padding: 0.5rem 0;
}
.header__header-top:before {
display: inline-block;
height: 100%;
vertical-align: middle;
content: "";
}
.header__navigation {
display: inline-block;
}
.header__navigation-item {
display: inline-block;
}
.header__navigation-item:not(:last-child) {
margin-right: 1.8rem;
}
.header__navigation-link {
font-size: 0.75rem;
color: #aeaeae;
text-decoration: none;
transition: 0.3s;
}
.header__navigation-link:hover,
.header__navigation-link:active {
color: #fff;
text-decoration: none;
}
.header__navigation-menu {
padding-left: 0;
list-style: none;
margin-bottom: 0;
}
.header__icon-box {
display: inline-block;
}
.header__icon-social {
text-decoration: none;
color: #aeaeae;
transition: 0.3s;
font-size: 18px;
}
.header__icon-social:hover {
color: #fff;
text-decoration: none;
}
.header__icon-social:not(:last-child) {
margin-right: 0.8rem;
}
.header__search-place {
position: relative;
}
.header__search-field {
height: 2.125rem;
padding-left: 0.85rem;
padding-right: 1.72rem;
width: 100%;
}
.header__search-field:focus {
outline: none;
}
.header__search-field:active {
outline: none;
}
.header__search-button {
height: 15px;
width: 15px;
background: url('../img/icons/search.png');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
border: none;
background-color: transparent;
position: absolute;
top: 50%;
right: 0.58rem;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.header__contacts {
padding: 1.625rem 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<header class="header">
<div class="header__header-top">
<div class="container">
<div class="row">
<div class="col-lg-7">
<nav class="header__navigation">
<ul class="header__navigation-menu">
<li class="header__navigation-item">
<a href="#" class="header__navigation-link">
Главная
</a>
</li>
<li class="header__navigation-item">
<a href="#" class="header__navigation-link">
Каталог
</a>
</li>
<li class="header__navigation-item">
<a href="#" class="header__navigation-link">
Акции и новости
</a>
</li>
<li class="header__navigation-item">
<a href="#" class="header__navigation-link">
Контакты
</a>
</li>
<li class="header__navigation-item">
<a href="#" class="header__navigation-link">
Оплата и доставка
</a>
</li>
<li class="header__navigation-item">
<a href="#" class="header__navigation-link">
Оптовый клиент
</a>
</li>
</ul>
</nav>
</div>
<div class="col-lg-2">
<div class="header__icon-box">
<a href="#" class="header__icon-social">
<i class="fab fa-instagram"></i>
</a>
<a href="#" class="header__icon-social">
<i class="fab fa-vk"></i>
</a>
<a href="#" class="header__icon-social">
<i class="fab fa-youtube"></i>
</a>
<a href="#" class="header__icon-social">
<i class="fab fa-odnoklassniki"></i>
</a>
<a href="#" class="header__icon-social">
<i class="fab fa-telegram-plane"></i>
</a>
</div>
</div>
<div class="col-lg-3">
<form method="GET" class="header__search-place">
<input type="text" name="search" placeholder="Поиск" class="header__search-field">
<button class="header__search-button">
</button>
</form>
</div>
</div>
</div>
</div>
<div class="header__contacts">
<div class="container">
<div class="row">
<div class="col-lg-2">
<a href="index.html" class="logo-box">
<img src="img/logo.png" alt="logotype" class="logo-box__logotype">
</a>
</div>
<div class="col-lg-9 offset-lg-1">
<div class="header__contact-box">
<div class="header__contact-icon-box">
</div>
<div class="header__contact-info">
<h5 class="header__contact-name">
Наш адрес
</h5>
<span class="header__contact-adress">
г.Красноярск Красноярский <br /> рабочий 160/7
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</header>