Здравствуйте, друзья!
Ситуация такая: сделал фиксированный хедер, который остается на своем месте при вертикальном скролле (с помощью position:fixed).
Проблема: верстка не адаптивная, поэтому при уменьшении экрана хедер обрезается справа и его не проскроллить горизонтально вместе с основным контентом.
Подскажите, пожалуйста, как решить такую проблему?
-
хорошо бы код увидеть. Но думаю стоит задать ему ширину + макс и мин ширину.– Maks Devda12 окт 2016 в 14:58
-
@MaksDevda Добавил ответ с кодом– Игорь Войнов12 окт 2016 в 15:09
Добавить комментарий
|
1 ответ
HTML
<header class="top_head_wrap">
<div class="top_head">
<nav>
<ul>
<li><a href="#" id="what_is_link">Что это?</a></li>
<li><a href="#" id="types_link">Типы проколов</a></li>
<li><a href="#" id="why_us_link">Наши преимущества</a></li>
<li><a href="#" id="how_working_link">Как мы работаем</a></li>
<li><a href="#" id="reviews_link">Отзывы</a></li>
</ul>
</nav>
<a href="#form" class="request magnific_popup_form">Заказать обратный звонок</a>
<div class="top_head_right">
<p> +7 (901) 23-45-678</p>
<p> с 09:00 до 23:00 без выходных</p>
</div>
</div>
</header>
CSS
.top_head_wrap {
background-color: rgba(0,0,0,.8);
width: 100%;
position: fixed;
height: 60px;
max-width: 100%;
z-index: 99;
}
.top_head {
font-family: "Arial";
font-size: 12px;
padding-top: 20px;
width: 1024px;
margin-right: auto;
margin-left: auto;
}
.top_head nav ul {
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
float: left;
}
.top_head nav ul li {
display: inline-block;
margin-right: 20px;
}
.top_head nav ul li:last-type {
margin-right: 0;
}
.top_head nav ul li a {
color: #fff;
text-decoration: none;
}
.top_head nav ul li a:hover {
color: #e34b68;
}
.request {
color: #fff;
border-bottom: #e34b68 1px solid;
margin-left: 80px;
float: left;
text-decoration: none;
}
.request:hover {
color: #e34b68;
}
.top_head_right {
margin-left: -80px;
margin-top: -20px;
float: right;
}
.top_head_right p {
margin: 0;
color: #fff;
text-align: right;
}
.top_head_right p:first-child {
color: #e34b68;
font-family: "DinProRegular";
font-size: 24px;
margin-right: -10px;
}