Как сделать чтобы меню не уезжало в право при смене разрешения?

Question

[LancX]

Сайт mowiless.ru

При изменении разрушении меню в шапке уезжает в права. Как сделать так чтобы меню сжималась вместе с сайтом при смене обезображении и находилось по середине?

Answer 1

[Ankhena]

@media screen and (min-width: 600px)
style.css?ver=4.8.1:1530
.main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
    display: inline-block !important;
    text-align: left;
    width: 100%;
    margin-left: 750px;
}

с margin-left разберитесь

Comments

[LancX]

А что именно не так? Не могли бы подсказать?

[Ankhena]

LancX, ну у вас написано, что при ширине экрана от 600 точек левый отступ от блока должен быть 750.
т.е. не помещается уже не только сам блок, но даже и отступ от него.

Логичнее плясать от правого края.
Позиционированием, float'ом, флексами или инлайн-блоком, вариантов масса.

Типа того: https://jsfiddle.net/L4st7hr3/

[LancX]

Что-то не могу добиться того, что бы меню уменьшалось вместе с браузером.

[Ankhena]

LancX, Выложите проблемный кусок кода на jsfiddle

[Ankhena]

LancX, с телефона иначе не посмотреть исходный код

[LancX]

https://jsfiddle.net/y72fuswq/
Может надо еще скинуть что-то?

[Ankhena]

LancX,
1. на сайте я вообще уже не вижу меню.
2. на jsfiddle не хватает одной открывающей { и двух закрывающих.
3. на jsfiddle не выложено обычного состояния.
4.float:rigt; right пишется вот так.
5. float right и left 40% противоречат друг другу по логике.
6. опишите словами как именно должно вести себя меню по вашей задумке и чем не устраивает мой пример выше.

уменьшалось вместе с браузером

Для пропорционального уменьшения шрифта используйте единицы vw для шрифта.

[LancX]

Меню должно находиться по середине на картинке, между логотипом и контактами. Т.е. если разрешение сайта меняется, меню не должно никуда уезжать, а быть посередине на картинке.

[Ankhena]

LancX,
так и пишите свойства так, чтобы была середина, а не фиксированное расстояние от левого или правого краев.
Например, так: https://jsfiddle.net/fj7xrdsu/

[LancX]

mysticky-nav это вы где взяли?

[Ankhena]

LancX, вероятнее всего на вашем сайте в его версии от 20 сентября.
Да какая разница как оно там называлось, замените на то, что вам нужно.

[LancX]

А вы не знаете как сделать чтобы картинка при уменьшении разрешения сайта не уезжала вниз?

[Ankhena]

LancX, эмммм... какая картинка?

[LancX]

Тут нормально

Здесь оно уже уезжает вниз

[Ankhena]

LancX,
высота блока Header123 panel-row-style panel-row-style-for-34-0 остается фиксированной и неизменной
у фоновой картинки background-size: 100% auto; и background-position: center center;

=>
1. разобраться с высотой блока
2. если бы вы не писали текст прямо в картинке, а задавали его в HTML, то background-size можно было бы поменять на cover