Поддержка Проблемы и решения Не выравнивается по центру навигация

  • На главной странице слайдер из которого попросили убрать пару пунктов меню. После удаления меню остается смещенным к левому краю, подскажите как выровнять все меню по центру?

    • Тема изменена 4 года, 2 месяца назад пользователем lvnnew.

    Страница, с которой нужна помощь: [войдите, чтобы увидеть ссылку]

Просмотр 12 ответов — с 1 по 12 (всего 12)
  • section class="car-top">
            <div class="container">
                <div class="car-img">
                <img />/img/cars/1.png">
    				
                    <img />/img/cars/2.png">
    				<img />/img/cars/3.png">
                    <img />/img/cars/4.png">
                    <img />/img/cars/5.png">
                    <img />/img/cars/6.png">
                    <img />/img/cars/8.png">
                    <img />/img/cars/3.png">
                    <img />/img/cars/9.png">
    
    		
    </div>
                <div class="car-menu">
                    <ul class="clearfix">
                        <li><a href="/uslugi/antigravijnaja-zashhita/">Антигравийная защита</a></li>
    					<li><a href="/uslugi/polirovka-avto/polirovka-optiki/">Полировка фар</a></li>
                        <li><a href="/uslugi/oklejka-plenkoj/oklejka-plenkoj-vinil/">Оклейка пленкой</a></li>
                        <li><a href="/uslugi/vinilografija/">Винилография</a></li>
                        <li><a href="/uslugi/reklama-na-transporte/">Реклама на транспорте</a></li>
                        <li><a href="/uslugi/tonirovka-avto/tonirovka-stekol/">Тонировка </a></li>
                        <li><a href="/uslugi/tonirovka-avto/tonirovka-far/">Тонировка фар</a></li>
    					</ul>
               </div>
            </div>
            <div class="car-menu-bg"></div>
        </section
    • Ответ изменён 4 года, 2 месяца назад пользователем lvnnew.

    Подскажите пожалуйста, для чего нужно поле «Ссылка на страницу с которой нужна помощь»?
    Я вот не знаю, а вы?


    что именно тут не выровнено по центру?

    После удаления, получается такой результат
    joxi.ru/KAg1YgDsXOZ9am

    • Ответ изменён 4 года, 2 месяца назад пользователем lvnnew.
    • Ответ изменён 4 года, 2 месяца назад пользователем lvnnew.
    • Ответ изменён 4 года, 2 месяца назад пользователем lvnnew.
    Anonymous User 17160716

    (@anonymized-17160716)

    lvnnew, привет.

    Через дочернюю тему (или через доп. стили WordPress) можно внести такие правки, чтобы выровнять по центру меню:
    .car-top .car-menu ul li {...} — убрать float: left; и добавить display: inline-block; margin: 0px -2px;

    .car-top .car-menu ul {...} — добавить text-align: center;.

    Спасибо за подсказку, внес небольшие изменения в доп. стили, все получается.

    Вылезла другая проблема. Как было упомянуто ранее задача была убрать две кнопки со слайдера 2-ю и 7-ю, с последней проблем не возникло, удалил из кода страницы и все, только смещение появилось. А вот со 2-й есть проблема, после ее удаления из кода, слайдер начинает работать некорректно. По наведению курсора отображаются несоответствующие кнопкам изображения, возвращаю строку на место и все отображается как должно.

    Есть ли какой то способ избежать этого?

    Anonymous User 17160716

    (@anonymized-17160716)

    lvnnew,

    Спасибо за подсказку, внес небольшие изменения в доп. стили, все получается.

    Только меню всё ещё не центрировано 🙂

    Вылезла другая проблема.

    Вполне предсказуемо, ответ в файле http://okleika.by/wp-content/themes/interdesigngroup/js/site.js

    По вашему методу центрировать у меня не получилось, пришлось костылить, вот так

    }
    .car-top .car-menu ul {
      list-style: none;
      margin-bottom: auto;
      width: 100%;
      display: flex;
      justify-content: center;
    }
    .car-top .car-menu ul li {
      display: inline-block;
      margin-bottom: auto;
      margin: 0px -2px;
      width: 100%;
      text-align: center;
    }

    выглядит печально и адаптивность куда то потерялась, но по другому мне не удалось меню центрировать.
    А вот по поводу site.js, это совсем печально. Я конечно подозревал, что подобное неадекватное поведение слайдера скорее всего связано с ломающимся скриптом, но ввиду отсутствия знаний в яваскрипт, все таки надеялся отделаться малой кровью.

    Anonymous User 17160716

    (@anonymized-17160716)

    lvnnew, видимо, вы ещё какие-то правки вносили в стилях, т.к. вчера было чуть иначе. Но не суть уже, разве что уберите тогда из получившегося костыля у .car-top .car-menu ul li margin: 0px -2px;, тогда появятся отступы между пунктами меню, как у вас было изначально.

    выглядит печально и адаптивность куда то потерялась, но по другому мне не удалось меню центрировать

    Да, есть такое. Адаптив вообще убился. Тогда изначально предложенный вариант с учётом правок стилей:

    .car-top .car-menu ul {
        list-style: none;
        margin-bottom: auto;
        width: 100%;
        text-align: center;
        padding: 0px;
    }
    .car-top .car-menu ul li {
        display: inline-block;
        margin-bottom: auto;
        margin: 0px -2px;
        text-align: center;
    }
    .car-top .car-menu ul li a {
        display: inline-block;
        background: #021D2F;
        padding: 15px 13px;
        border-right: 1px solid #fff;
        border-bottom: 1px solid #fff;
        width: 100%;
        color: #fff;
        font-family: Roboto Condensed;
        font-size: 11.7px;
        font-weight: 400;
        text-transform: uppercase;
    }

    Адаптив при этом сохранится.

    ввиду отсутствия знаний в яваскрипт

    и

    отделаться малой кровью

    Крайне редко получается, и уж точно не при таких задумках как у вас 🙂 Но сейчас вы хотя бы хардкодом можете поправить косяк с меню.

    Спасибо большое, помогло. Пойду искать помощи с этим загадочным скриптом.))

    Закрыл тему

    Anonymous User 17160716

    (@anonymized-17160716)

    lvnnew, 🙂

Просмотр 12 ответов — с 1 по 12 (всего 12)
  • Тема «Не выравнивается по центру навигация» закрыта для новых ответов.