It is necessary to apply the class to the menu if the elements of the block preceding it cease to fit on one line:
.wrapper { background: #ccc; } header { position: relative; min-width: 300px; width: 90%; margin: 0 auto; } .top-block > div { float: left; margin-right: 20px; } .top-block:after, .menu:after{ content:""; display: table; clear: both; } .logo { width: 100px; height: 40px; background: #65a; } .cart { width: 100px; height: 50px; background: #00f; } .menu { position: absolute; width: 100%; left: 0; top: 50px; background: #f00; color: #fff; } .menu li { display: inline-block; list-style: none; } .static-menu { position: static; } <div class="wrapper"> <header> <div class="top-block"> <div class="logo">logo</div> <div class="tel">+25253546</div> <div class="cart"></div> </div> <div class="menu"> <ul> <li>link1</li> <li>link2</li> <li>link3</li> <li>link4</li> </ul> </div> </header> </div> Those. I need when reducing the width of the window, when the height of the upper block changes, add to the menu a class static-menu https://jsfiddle.net/q4swqdup/
