Вопросы по меню в адаптивном дизайне : Создание сайтов и поисковая оптимизация (SEO)

OlegON · █ 04.06.2015 22:32

Что-то я уперся.
На , при уменьшении экрана браузера до 865 по горизонтали, меню, соответственно адаптивному дизайну, сворачивается и ... съезжает вниз на картинку. Убился, не могу найти, где его можно поднять вверх. Кто-нибудь видит цифирку в CSS соответствующую?

twix · █ 04.06.2015 22:49

Код:

@media screen and (max-width: 865px) {
	#header {
		max-height: initial;
	}
}

Более того, при разрешении 960 .. 1095 меню всё равно уезжает вниз.
Сделай линкам в меню горизонтальный паддинг поменьше: у меня при "padding: 18px 14px 18px 14px;" отображается нормально, при больших цифрах - вёрстку раскуепыживает.

OlegON · █ 04.06.2015 22:58

Если честно, я не стал ближе к разгадке :( Как ширина хедера влияет на положение меню по вертикали? Попробовал паддинг менять, меню плющится, но вверх не поднимается :( Ткни, пожалуйста, класс, где менять, может не там меняю?

twix · █ 04.06.2015 23:21

Цитата:

OlegON ➤ Если честно, я не стал ближе к разгадке :( Как ширина хедера влияет на положение меню по вертикали? Попробовал паддинг менять, меню плющится, но вверх не поднимается :( Ткни, пожалуйста, класс, где менять, может не там меняю?

div.secondary-navigation у тебя с float:right, но высота #header задана жёстко через max-height, и когда ширины окна уже не хватает, чтобы вписать в шапку меню и "лого", это див уползает из шапки, наезжая на контент:

Рекомендуемый "скаленки" фикс (не могу подсказать номер строки в оригинале - вижу только пожатую цсс-ину):

Код:

.secondary-navigation a {
	...
	padding: 18px 14px 18px 14px;
	...
}

Апдейт: да, я по-первости написал max-width вместо max-height для солюшена. Не знаю, о чём тогда думал...