Jump to content
Search In
  • More options...
Find results that contain...
Find results in...

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


Recommended Posts

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

Подскажите, пожалуйста, как выровнять по центру пункты горизонтального меню в версии 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;

}

}

Edited by Dmitry0923
Link to post
Share on other sites
Guest

для стандартного шаблона так.. в 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;
}
Edited by Guest
Link to post
Share on other sites

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

Link to post
Share on other sites
Guest
This topic is now closed to further replies.
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.