Добрый день.
При заполнении сайта столкнулись с проблемой, все пункты главного меню смещены влево. Как сделать так, чтобы пункты меню располагались по центру не зависимо от размера экрана? Может у кого-то есть рабочий CSS? Сам блок меню настроен на всю ширину.
В css вашей темы добавьте:
/* Выравниваем по центру
.tygh-header .ty-menu__items {
text-align: center;
}
@media (min-width: 767px) {
.tygh-header .ty-menu__item {
display: inline-block !important;
float: none !important;
}
.tygh-header .ty-menu__menu-btn {
display: none !important;
}
}
/*В мобильной версии выравниваем слева,чтобы красиво было
@media (max-width: 767px) {
.ty-menu__items .ty-menu__item{
text-align: left !important;
}
}
1 лайк
Превеликое спасибо 
Подскажите, пожалуйста, а что еще дописать, чтобы подменю выравнивалось слева в декстопной версии?
Sorry!!! Забыл совсем сразу написАть.
// ========= В мобильной версии выравниваем слева,чтобы красиво было и для десктопной версии подменю слева
@media (max-width: 767px) {
.ty-menu__items .ty-menu__item{
text-align: left !important;
}
}
.ty-menu__submenu-item-header {
border-color: @base;
}
.ty-menu__item-active .ty-menu__item-link {
background: #470467;
color:#fff;
}
.no-touch .ty-menu__item:hover .ty-menu__item-link,
.is-hover-menu .ty-menu__item-link,
.is-hover-menu.ty-menu__item-active .ty-menu__item-link {
background:#470467;
color: #fff;
text-shadow: none;
-webkit-transition: all 0.4s ease-out 0s;
-moz-transition: all 0.4s ease-out 0s;
-ms-transition: all 0.4s ease-out 0s;
transition: all 0.4s ease-out 0s;
}
Спасибо большое. Но только почему-то в декстопной версии подменю все равно не выравнивается слева. Может что-то я не правильно делаю? Я к выше написанному добавила текст из топика от 2 апреля.
/* Main menu
========================================================================== */
.ty-menu__items {
background:#f5f6f7;
.ty-menu__item-link {
padding: 11px 16px;
min-height: 37px;
font-family: ‘Oswald’,sans-serif;
font-size: 13px;
text-transform: uppercase;
color: #000;
}
}
.ty-menu__submenu-items {
border: 1px solid #470467;
border-top: 3px solid #470467;
}
// ======================================================= Выравниваем по центру
.ty-menu__items {
text-align: center;
}
.ty-menu__submenu-items {
text-align: left !important;
}
@media (min-width: 767px) {
.ty-menu__item {
display: inline-block !important;
float: none !important;
}
.ty-menu__menu-btn {
display: none !important;
}
}
// ====================================== В мобильной версии выравниваем слева,чтобы красиво было
@media (max-width: 767px) {
.ty-menu__items .ty-menu__item{
text-align: left !important;
}
}
.ty-menu__submenu-item-header {
border-color: @base;
}
.ty-menu__item-active .ty-menu__item-link {
background: #470467;
color:#fff;
}
.no-touch .ty-menu__item:hover .ty-menu__item-link,
.is-hover-menu .ty-menu__item-link,
.is-hover-menu.ty-menu__item-active .ty-menu__item-link {
background:#470467;
color: #fff;
text-shadow: none;
-webkit-transition: all 0.3s ease-out 0s;
-moz-transition: all 0.3s ease-out 0s;
-ms-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
}
Полный код центрирования.Оформление только поменяете на свое.
Живой пример
Ура! Все получилось! Огромное спасибо