Подскажите, как правильно расположить горизонтально меню в шапке, чтобы до разрешения 1024px пункты меню были в одну строку?
T.е. чтобы пункт меню и текст не переносились на новую строку при уменьшении разрешения экрана.
Для ссылок ещё нужен hover
, чтобы при наведении ссылка выделялась другим цветом.
Т.е. при данном количестве пунктов меню должно быть прижато слева и справа к краям родителя. А если пунктов меньше, пусть будет прижато влево.
Т.е. нужен адаптив
header {
background: red;
}
.wrapper {
display: flex;
justify-content: flex-start;
align-items: center;
position: relative;
margin: 0 auto;
max-width: 1440px;
width: 95%;
padding-left: 15px;
padding-right: 15px;
}
aside {
width: 19.91%;
flex-basis: 19.91%;
max-width: 281px;
outline: 1px solid #fff;
color: #fff;
}
.links {
width: 80.09%;
flex-basis: 80.09%;
padding: 10px 0 10px 20px;
}
.links-ul {
display: inline-flex;
justify-content: flex-start;
margin: 0;
padding: 0;
outline: 1px solid #fff;
}
li {
display: inline-block;
}
a {
font-size: 12px;
padding: 18px 18px;
font-weight: 600;
color: #fff;
line-height: 1.2;
text-decoration: none;
display: inline-block;
text-transform: uppercase;
transition: .2s;
}
a:hover,
a.active {
background: #bd3534;
}
@media (min-width: 1440px) {
a {
font-size: 14px;
padding: 18px 20px;
}
}
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<header>
<div class="wrapper">
<aside>
aside
</aside>
<nav class="links">
<ul class="links-ul">
<li><a href="about.html">О нас</a></li>
<li><a href="actions.html">Акции и скидки</a></li>
<li><a href="delivery.html">Доставка и оплата</a></li>
<li><a href="answers.html">Вопросы и ответы</a></li>
<li><a href="reviews.html">Отзывы</a></li>
<li><a href="news.html">Новости</a></li>
<li><a href="seasons.html">Сезонный повод</a></li>
<li><a href="contacts.html">Контакты</a></li>
</ul>
</nav>
</div>
</header>