Как правильно сверстать header сайта?

Доброго времени суток, возник следующий вопрос при верстке сайта - есть шапка сайта 181cb6e7be4f4f70b7c544a4e879c49b.png Сайт делается с помощью bootstrap. Если мы используем лого ("INFUSION") внутри дива col-md-2, то слева остается просто белый отступ, а затем идет лого на цветном фоне. Как лучше избавится от этого "пробела", чтобы не было проблем при адаптации сайта под другие устройства?
  • Вопрос задан
  • 1149 просмотров
Решения вопроса 1
.top_line{
background-color: #63c6ae;
overflow: hidden;
}
.top_line .col-md-10 {background-color: #fff;}
.top_line .col-md-10:after {
content:'';
position:absolute;
left: 100%;
width: 50%;
height: 100%;
top: 0;
background: #fff;
}
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@hakkol Автор вопроса
<header class="main_header">
	<div class="top_line">
		<div class="container">
			<div class="row">
				<div class="col-md-2">
					<div class="main_logo">
						<p>Infusion</p>
					</div>					
				</div>
				<div class="col-md-10">
					<div class="main_nav">
						<ul>
							<li><a href="#">design Folio</a></li>
							<li><a href="#">Services</a></li>
							<li><a href="#">our business</a></li>
							<li><a href="#">how we help</a></li>
							<li><a href="#">take the tour</a></li>
							<li><a href="#">contact</a></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
</header>


в css пишу:

.main_logo {
	background-color: #63c6ae;
	height: 74px;
}
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы