Две строки в главном меню

[Angor]

Opencart Pro 2.3   У меня есть пункты главного меню словосочетанием, скажем "последний вздох". Можно ли сделать эти словосочетания в две строки?, потому ,что все пункты не помещаются в одну строку. Вот так

Скрытый текст

[jaffagold]

Прописать этому элементу max-width и произойдет перенос второго слова.

[Angor]

Получилось

Скрытый текст

#menu .nav > li > a {
	color: #fff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	padding: 14px 15px 14px 15px;
	min-height: 15px;
	font-size: 14px;
	background-color: transparent;
	max-width: 120px;

 

Щас бы выровнять всё по вертикали и гориз-ли? спс

Скрытый текст

[BuslikDrev]

2 часа назад, Angor сказал:

Получилось

Скрытый текст

#menu .nav > li > a {
	color: #fff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	padding: 14px 15px 14px 15px;
	min-height: 15px;
	font-size: 14px;
	background-color: transparent;
	max-width: 120px;

Щас бы выровнять всё по вертикали и гориз-ли? спс

 

Добавьте ещё:
text-align: center;

[jaffagold]

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

Проверьте, что в мобильной версии не отображается этот пункт меню в 2 строчки.

А именно так оно и есть.

И медиазапросом уберите ограничение

Что-то типа того

@media (max-width: 767px) {
menu .nav > li > a {

max-width: none;

}

}

 

 

[Angor]

У меня при разном разрешении сохраняется две строки.Скриншоты на 640x960 и 768x1280

Скрытый текст

Скрытый текст

[jaffagold]

Это понятно, так вы сделайте на одном, посмотрите, как сработало, потом делайте для других ( просто число меняйте, вместо 787 напишите 1281.

Это, кстати, можно делать в инспекторе кода, если вы им пользуетесь. Изменили, поменяли ширину окна браузера, проверили, подкорректировали.

Потом окажется, что, например, на 1150 тоже надо что-то доработать. Это не одномоментный эпизод, а процесс. 

 

 

[Angor]

Спасибо @jaffagold Я все понял,приступаю к процессу.

[BuslikDrev]

5 часов назад, Angor сказал:

Спасибо @jaffagold Я все понял,приступаю к процессу.

Сайт имеет 4 вида просмотра: col-lg-3 col-md-4 col-sm-6 col-xs-12
В стилях стандартного шаблона вы можете найти готовые коды размеров такого типа:

Скрытый текст

@media (min-width: 767px) {
сюда пишется стиль для всех устройств, кроме мобильных.
}
@media (max-width: 768px) {
сюда пишется стиль для мобильных устройств. col-xs-
}
@media (min-width: 1200px) {
Сюда пишется стиль для мониторов компьютера. col-lg-
}
@media (min-width: 992px) and (max-width: 1199px) {
Сюда пишется стиль для экранов, например, нетбуков. col-md-
}
@media (min-width: 768px) and (max-width: 991px) {
Сюда - для планшетов. col-sm-
}

 

Короче говоря, не парьтесь, вы правильно сделали, вы поставили ограничение на определённый размер (max-width: 120px;), и если название из двух слов будет шире этого размера, то второе слово автоматом переносится на вторую строку т.к. не вмещается в одну строку.
Сайт резиновый от 1200 пикселей до 768 пикселей, при большем уменьшении меньше 767 пикселей - меню категорий приобретает вид для мобильных устройств.

[Angor]

Спасибо, всё получилось как хотел.