Как убрать в CSS сползание меню в разные стороны на разных диагоналях монитора компьютера?

Question

[Михаил Компас]

Добрый день. На моём wordpress сайте https://transscreen.ru на разных диагоналях (13", 17", 29") монитора компьютера (см. скриншоты ниже) меню сдвигается в разные стороны в зависимости от диагонали монитора компьютера. Меню сделано на wordpress плагине Max Mega Menu.
Кстати, для мобильного меню есть отдельная настройка, мобильное меню меня устраивает полностью.
Как убрать в CSS сползание меню в разные стороны на разных диагоналях монитора компьютера?

13 дюймов ноутбук:


17 дюймов ноутбук:


29 дюймов монитор:


Код который я указал в поле для кастомной CSS позиционирования блока меню (см. код и скриншот кода ниже):

#{$wrap} {
    clear: both;
}

#nav #mega-menu-wrap-main-nav {
    margin: 0 auto;
	max-width: 1270px;
    min-width: 1260px;

Скриншот кастомной CSS

Comments

[Михаил Компас]

Xdevelx, я не говорил тут в теме сколько я зарабатываю, поэтому то что у меня в title указано - не относится к моему вопросу. Кто-то подскажет все таки ответ на мой вопрос про съезжающее меню?

Answer 1

[AndrewXr]

Поиграйтесь с медиа запросами. Для 17, 29 дюймовыми мониторами, должен помочь этот код:

@media (min-width: 1291px) { 
	#nav {
	    margin: 200px 0 0 12px!important;
	    width: 100%;
	}
}

А так, как и сказали, лучше все с 0 переделать, много ненужных стилей, нет структуры, используете разные размеры при верстке

Comments

[Михаил Компас]

спасибо! помогло!
я сделал для 3 разрешений, дальше еще добавлю больше вариантов разрешений экрана. Кстати не всегда рарешение экрана отображается истинным, истинное разрешение экрана показывает например сайт myresolutionis.ru

Код который я указал в кастомном оформлении:

@media (min-width: 2560px) and (max-width: 2560px) {
#nav #mega-menu-wrap-main-nav {
    margin: 0px 0px 0px 603px !important;
	max-width: 1270px;
    min-width: 1260px;
}
}


@media (min-width: 1920px) and (max-width: 1920px) {
#nav #mega-menu-wrap-main-nav {
    margin: 0px 0px 0px 283px !important;
	max-width: 1270px;
    min-width: 1260px;
}
}

@media (min-width: 1250px) and (max-width: 1300px) {
#nav #mega-menu-wrap-main-nav {
    margin: 0px 0px 0px -23px !important;
	max-width: 1282px;
    min-width: 1269px;
}
}

Answer 2

[anyshape]

Поместите nav внутрь outer

Comments

[Михаил Компас]

перенес nav внутрь outer прямо в инспекторе элементов в браузере , но панель меню никак не отреагировала, так и сдвинуто вбок (см. скриншот)

Скриншот кода:


Скриншот элемента меню:


Весь скриншот:

[anyshape]

Вам нужно переверстывать этот шаблон. Там нет ни структуры ни логики стилей. Так просто не решить