Hello, friends!
The situation is this: made a fixed header that remains in place with a vertical scroll (using position: fixed).
Problem: the layout is not adaptive, therefore, when reducing the screen, the header is cut off on the right and it is not scrolled horizontally along with the main content.
Can you please tell me how to solve this problem?

  • good to see the code. But I think it is worth asking him the width + max and min width. - Maks Devda 2:58 pm
  • @MaksDevda Added answer with code - Igor Voinov

1 answer 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; }