@mmaximov97
веб-программист

Почему схлопывается навигация?

Что происходит с верхним меню и как это исправить? Сайт для просмотра. Может быть еще какие-то советы по исправлению этой верстки?
5ca5d41929707000952586.png
<div class="nav scale_nav">
	 		<a href="index.html">
		 		<div class="nav__item">
		 			Главная
		 		</div>
	 		</a>
	 		<a href="about.html">
		 		<div class="nav__item">
		 			Об ассоциации
		 		</div>
	 		</a>
	 		<a href="info.html">
		 		<div class="nav__item">
		 			Информация обязательная<br>для размещения
		 		</div>
	 		</a>
	 		<a href="reestr.html">
		 		<div class="nav__item">
		 			Реестр членов
		 		</div>
	 		</a>
	 		<a href="contacts.html">
		 		<div class="nav__item">
		 			Контакты
		 		</div>
	 		</a>
	 		<button class="nav__button-popup" onclick="openbox('box')">
	 			<b>Бесплатная<br>консультация</b>
	 		</button>
	 	</div>

body {
	background-color: #f7f7f7;
	font-family: 'Arsenal', sans-serif;
	margin:auto;
	overflow-x: auto;
	width: 1550px;
	overflow-x:hidden;
}
.nav__item {
	display: flex;
	align-items: center;
	height: 65px;
	background-color: #eeeeee;
	margin-right: 5px;
	padding-left: 15%;
	padding-right: 15%;
	transition-duration: 0.3s;
	cursor: pointer;
	font-size: 20px;
	color: #666464;
	font-family: 'Arsenal', sans-serif; 
	line-height: 22px;
	text-align: center;
	white-space: nowrap;
}
.nav__item:hover {
	background-color: #ffffff;
}
.nav {
	width: 100%;
	display: flex;
	justify-content: center;
}	
.nav__item a {
	text-decoration: none;
}
.nav__button-popup {
	position: relative;
    display: inline-block;
    font-family: ;
    line-height: 1.2;
    font-size: .9375rem;
    width: 10.375rem;
    padding: .6875rem 0 .6875rem 1.8125rem;
    color: #404040;
    border: .125rem solid #b62f1b;
    cursor: pointer;
    background-color: transparent;
    text-align: left;
    transition: color .2s ease,border .2s linear;
    margin-left: 20px;
}
.nav__button-popup:hover {
	color: #b62f1b;
}
.nav__button-popup:hover::before {
	bottom: 1.9625rem;
    top: 1.9625rem;
}
.nav__button-popup:hover::after {
	bottom: 1.9625rem;
    top: 1.9625rem;
}
.nav__button-popup::before, .nav__button-popup::after{
	content: "";
    position: absolute;
    background: #f7f7f7;
    width: .25rem;
    bottom: 1.0625rem;
    top: 1.0625rem;
    transition: all .5s ease;
}
.nav__button-popup::after {
	right: -.1875rem;
}
.nav__button-popup:before {
    left: -.1875rem;
  • Вопрос задан
  • 202 просмотра
Решения вопроса 1
RAX7
@RAX7
у .nav__item убери паддинг в процентах, он рассчитывается от ширины родителя, а ширина родителя зависит от .nav__item.
https://jsfiddle.net/znt5pbhw/
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
Насколько я знаю - div элементы нельзя закрывать в ссылку А поломка у вас из за этого.nav__item { display...
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы