There is a code:

.menu { width: 90%; height: 100px; background-color: #fff; display: flex; justify-content: space-between; align-items: center; padding-left: 5%; padding-right: 5%; } .menu__category li { display: inline; padding: 20px; } .menu__category a { padding-bottom: 36px; transition: all 0.2s ease; color: black; } .menu__category a:hover { border-bottom: 6px solid #ec4e4e; color: #ec4e4e; } .menu__social i { padding: 10px; transition: color 0.2s ease; } .menu__social i:hover { color: #ec4e4e; } 
 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <div class="menu"> <div class="menu__logo"> <img src="img/logo.png" alt="logo"> </div> <div class="menu__category"> <ul> <li> <a href="#">Главная</a> </li> <li> <a href="#">Новинки</a> </li> <li> <a href="#">Link</a> </li> <li> <a href="#">Link</a> </li> <li> <a href="#">Link</a> </li> <li> <a href="#">Link</a> </li> </ul> </div> <div class="menu__social"> <i class="fa fa-facebook" aria-hidden="true"></i> <i class="fa fa-twitter" aria-hidden="true"></i> <i class="fa fa-instagram" aria-hidden="true"></i> </div> </div>

I want to make sure that when you reduce the screen (on the tablet, for example) the logo and links are in one row, and the menu is transferred to the next. I do not know how to implement. Thanks in advance for your help.

    1 answer 1

    You basically need a separate markup with media-query for small resolutions (for example, take up to 800px in width).

     @media (max-width: 800px) { .menu { /* Чтобы header мог занимать много строк */ flex-wrap: wrap; } .menu__category { /* Чтобы меню занимало всю строку */ width: 100%; /* Чтобы меню было в самом конце */ /* можете поставить другое число, главное >= 1 */ order: 9999; } }

    Whole example

     .menu { width: 90%; height: 100px; background-color: #fff; display: flex; justify-content: space-between; align-items: center; padding-left: 5%; padding-right: 5%; } .menu__category li { display: inline; padding: 20px; } .menu__category a { padding-bottom: 36px; transition: all 0.2s ease; color: black; } .menu__category a:hover { border-bottom: 6px solid #ec4e4e; color: #ec4e4e; } .menu__social i { padding: 10px; transition: color 0.2s ease; } .menu__social i:hover { color: #ec4e4e; } @media (max-width: 800px) { .menu { flex-wrap: wrap; } .menu__category { width: 100%; order: 9999; } } 
     <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <div class="menu"> <div class="menu__logo"> <img src="img/logo.png" alt="logo"> </div> <div class="menu__category"> <ul> <li> <a href="#">Главная</a> </li> <li> <a href="#">Новинки</a> </li> <li> <a href="#">Link</a> </li> <li> <a href="#">Link</a> </li> <li> <a href="#">Link</a> </li> <li> <a href="#">Link</a> </li> </ul> </div> <div class="menu__social"> <i class="fa fa-facebook" aria-hidden="true"></i> <i class="fa fa-twitter" aria-hidden="true"></i> <i class="fa fa-instagram" aria-hidden="true"></i> </div> </div>

    You can also improve this example by adding to general styles (not inside the media query):

     .menu__category ul { /* Чтобы меню гарантированно было на одной строке */ /* Так как по умолчанию стоит flex-wrap: nowrap; для flexbox */ display: flex; /* Удалить padding для ul по умолчанию */ padding: 0; /* Расположить контент по центру */ justify-content: center; }

    On mobile devices, you can also reduce padding for .menu__category ul li , for example, by setting a lower value ( 10px , 5px , etc.) or simply set as a percentage. You can also reduce or remove padding for .menu .