[Решено] Выровнять по центру верхнее горизонтальное меню

[Dmitry0923]

Всем добрый день,

Подскажите, пожалуйста, как выровнять по центру пункты горизонтального меню в версии ocStore 2.1.0.1.1

Вот тут описана проблема и ее решение https://opencartforum.com/topic/18079-how-to-центрируем-пункты-горизонтального-меню/

Но для версии ocStore 2.1.0.1.1 она не подходит.

Вот какой код в блоке menu в файле catalog\view\theme\default\stylesheet\stylesheet.css. Пожалуйста, напишите пошагово что нужно менять. Спасибо заранее!

/* menu */

#menu {

background-color: #229ac8;

background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);

background-repeat: repeat-x;

border-color: #1f90bb #1f90bb #145e7a;

min-height: 40px;

text-align:center;

}

#menu .nav > li > a {

color: #fff;

text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);

padding: 10px 15px 10px 15px;

min-height: 15px;

background-color: transparent;

}

#menu .nav > li > a:hover, #menu .nav > li.open > a {

background-color: rgba(0, 0, 0, 0.1);

}

#menu .dropdown-menu {

padding-bottom: 0;

}

#menu .dropdown-inner {

display: table;

}

#menu .dropdown-inner ul {

display: table-cell;

}

#menu .dropdown-inner a {

min-width: 160px;

display: block;

padding: 3px 20px;

clear: both;

line-height: 20px;

color: #333333;

font-size: 12px;

}

#menu .dropdown-inner li a:hover {

color: #FFFFFF;

}

#menu .see-all {

display: block;

margin-top: 0.5em;

border-top: 1px solid #DDD;

padding: 3px 20px;

-webkit-border-radius: 0 0 4px 4px;

-moz-border-radius: 0 0 4px 4px;

border-radius: 0 0 3px 3px;

font-size: 12px;

}

#menu .see-all:hover, #menu .see-all:focus {

text-decoration: none;

color: #ffffff;

background-color: #229ac8;

background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);

background-repeat: repeat-x;

}

#menu #category {

float: left;

padding-left: 15px;

font-size: 16px;

font-weight: 700;

line-height: 40px;

color: #fff;

text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);

}

#menu .btn-navbar {

font-size: 15px;

font-stretch: expanded;

color: #FFF;

padding: 2px 18px;

float: right;

background-color: #229ac8;

background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);

background-repeat: repeat-x;

border-color: #1f90bb #1f90bb #145e7a;

}

#menu .btn-navbar:hover, #menu .btn-navbar:focus, #menu .btn-navbar:active, #menu .btn-navbar.disabled, #menu .btn-navbar[disabled] {

color: #ffffff;

background-color: #229ac8;

}

@media (min-width: 768px) {

#menu .dropdown:hover .dropdown-menu {

display: block;

}

}

@media (max-width: 767px) {

#menu {

border-radius: 4px;

}

#menu div.dropdown-inner > ul.list-unstyled {

display: block;

}

#menu div.dropdown-menu {

margin-left: 0 !important;

padding-bottom: 10px;

background-color: rgba(0, 0, 0, 0.1);

}

#menu .dropdown-inner {

display: block;

}

#menu .dropdown-inner a {

width: 100%;

color: #fff;

}

#menu .dropdown-menu a:hover,

#menu .dropdown-menu ul li a:hover {

background: rgba(0, 0, 0, 0.1);

}

#menu .see-all {

margin-top: 0;

border: none;

border-radius: 0;

color: #fff;

}

}

Змінено 5 січня 2016 користувачем Dmitry0923

[Гість]

для стандартного шаблона так.. в stylesheet.css добавить

.navbar-collapse.collapse {
    text-align: center;
}
.navbar-nav {
    margin: 0 auto;
    padding: 0;
    display: inline-block;
    margin-bottom: -4px;
    text-align: left;
    float: none;
}

Змінено 5 січня 2016 користувачем Гість

[Dmitry0923]

koreshok, огромное человеческое спасибо!!! Я уже не знал что и делать. Потратил 1 день на поиск инфо - ничего не нашел. РАБОТАЕТ!