maxxtweek
@maxxtweek
Начинающий бекэнд разработчик

Как «растянуть» меню на всю ширину экрана?

Всем доброго времени суток. Нужно меню растянуть на всю ширину экрана,как можно это сделать? Знакомый сказал,что верстка кривая,и нужно враппер поменять местами с контентом. Но хотелось бы узнать по-подробнее.Так как ковырял.но ничего не получилось.
Сам сайт
Заранее благодарю за ответ.
xlxCN.jpg
  • Вопрос задан
  • 7442 просмотра
Решения вопроса 1
space2pacman
@space2pacman Куратор тега CSS
Просто царь.
Как вариант можете добавить в свой файл css это
#navigation {
    width: calc(100% - (-99px));
    margin-left: -50px;
}

а в layout.css на 75 строке поменять это
@media only screen and (min-width: 768px){
ul.nav li {
    padding-left: 3%;
}
}

на это
@media only screen and (min-width: 768px){
ul.nav li {
    padding-left: 50px;
}
}

Хотя это не совсем валидно. Лучше с враппером разобраться. С другой стороны смотрится нормально и ничего не едет.

Добавил скриншот.
88a128859cc54ac8bc390fe92a48e3ba.png
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
alleroy
@alleroy
Изучаю фреймворк laravel
Он у тебя походу находиться в container или wrapper смотря как ты назвал. Тебе надо вывести меню оттуда и дать width 100% скинь код сайта я тебе точно скажу тогда
Ответ написан
@ArtViolence
<nav class="main-nav">
<a href="#">Главная</a>
<a href="#">Доставка и оплата</a>
<a href="#">О компании</a>
<a href="#">Отзывы</a>
<a href="#">Контакты</a>
</nav>


.main-nav
	display: table
	position: relative
	width: 100%
	height: 60px
	a
		color: #000
		display: table-cell
		text-align: center
		vertical-align: middle
		min-width: 120px
		text-decoration: none
		border-left: 1px solid lighten($accent, 5%)
		transition: background-color 1s easy
		&:last-child
			border-right: 1px solid lighten($accent, 5%)
		&:hover
			background-color: lighten($accent, 5%)
			text-decoration: none
			transition: background 1s easy


меню будет на всю ширину контейнера, тебе надо сделать его width: 100%. элементы распределятся равномерно и без промежутков
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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