Меню в две строки ПОЛНОЕ РЕШЕНИЕ

[TAXMAN]

Много категорий в главном меню заставило меня етим заняться.
Раньше нашел такую же тему, но конкретно так и никто не сказал как ето сделать. Потратил время и сделал.
Хочу облегчить всем жизнь и сберечь время, у меня OpenCart 1.5.1.3, но я думаю что у всех будет так же.

Значит так:

Заходим в css, и ищем файл stylesheet.css. Путь к файлу: www/catalog/view/theme/theme001/stylesheet/stylesheet.css.
Там ищем #menu > ul > li > a, и добавим сразу же text-align: center; ето позволит сделать текст по центру один под другим.
потом идет такой код ето лично в моем CSS.

font-size: 12px;

color: #FFF;

line-height: 14px;

text-decoration: none;
Видим следующую строку  display: block; изменяем на  display: table-caption; ето сделает текст в столбец.

padding: 5px 7px 11px 7px;-webkit-transition-duration: 0.5s;-moz-transition-duration: 0.5s;-o-transition-duration: 0.5s; (в padding изменяется свойства ячеек).

z-index: 6;

position: relative; text-transform:uppercase;font-family: 'Open Sans', sans-serif;

 

 

Еслы отцентрирую ячейки напишу как)

[TAXMAN]

Сделал.
Заходим в css, и ищем файл stylesheet.css. Путь к файлу: www/catalog/view/theme/theme001/stylesheet/stylesheet.css.
Там ищем #menu > ul > li > a,           и тупо меняем код.  А дальше Дорогие мои двигаем CSS сами.
 {
width: 100px;
text-align: center;
overflow: auto;
margin: 0px auto 0px auto;
vertical-align: top;
color:#fff;
margin-left: 30px;
margin-right: 30px;
display: inline-block;
}

 

Возможно надо будет опустить чуточку меню в низ. вот тут

/* menu */

#menu {

background: url('../image/tail-menu.gif') left top repeat-x;

height: 37px;   <------------------ тут  просто добавляем пиксилей что бы не соскальзывала левая колонка.

margin-bottom:0px;

 

ПРОБУЕМ ЕКСПЕРЕМЕНТИРУЕМ) всем хороших правок)

 

Кому помогло, не забываем ставить  мне плюсик)

СПАСИБО)

для вас старался)
 

[lemast]

Сделал.

Заходим в css, и ищем файл stylesheet.css. Путь к файлу: www/catalog/view/theme/theme001/stylesheet/stylesheet.css.

Там ищем #menu > ul > li > a, и тупо меняем код. А дальше Дорогие мои двигаем CSS сами.

{

width: 100px;

text-align: center;

overflow: auto;

margin: 0px auto 0px auto;

vertical-align: top;

color:#fff;

margin-left: 30px;

margin-right: 30px;

display: inline-block;

}

Возможно надо будет опустить чуточку меню в низ. вот тут

/* menu */

#menu {

background: url('../image/tail-menu.gif') left top repeat-x;

height: 37px; <------------------ тут просто добавляем пиксилей что бы не соскальзывала левая колонка.

margin-bottom:0px;

ПРОБУЕМ ЕКСПЕРЕМЕНТИРУЕМ) всем хороших правок)

Кому помогло, не забываем ставить мне плюсик)

СПАСИБО)

для вас старался)

Все получилось, спасибо!

Змінено 11 лютого 2014 користувачем lemast