Jump to content
Sign in to follow this  
Dmitry0923

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

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

Share this post


Link to post
Share on other sites

для стандартного шаблона так.. в 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 koreshok
  • +1 2

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
Guest
This topic is now closed to further replies.
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×

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.