Как центрировать элемент выпадающего меню?
Я начал использовать тему WordPress «Тема Pinnacle» и оптимизировал ее для своих нужд. Но теперь у меня проблема, которую я не могу решить, и я надеялся, что здесь кто-нибудь поможет.
Я пытаюсь центрировать большое меню (больше столбцов, затем обычное раскрывающееся меню) по родительскому элементу.
На моем Сайт "Wilde-NaTouren" пункт меню "Wandern + Trekking" является проблемой.
Обычный ".kt-lgmenu" обычно имеет полную ширину, но я пытаюсь задать ему фиксированную ширину с помощью следующего кода.
.kad-primary-nav .sf-menu>.kt-lgmenu>ul {
width: 520px!important;
}
Теперь мне нужно центрировать .kt-lgmenu>ul по центру .sf-menu>.kt-lgmenu, но я не знаю, как это сделать.
Вот 2 изображения, чтобы посмотреть, как это выглядит прямо сейчас, и что я хочу получить (извините, не могу опубликовать изображения).
Фактическая ситуация -> Результат
Спасибо за вашу помощь
Просто ссылка на веб-сайт ... слишком много файлов CSS и загруженных материалов из wordpress. Но на вопрос отвечает Энди Хоффман.
Ответы 1
У вас уже есть относительный контейнер li, и это первый шаг. Следующим шагом будет горизонтальное центрирование скрытого раскрывающегося списка с помощью transformX:
.sf-dropdown-menu {
…
left: 50%;
transform: translateX(-50%);
}
Я отредактировал сайт в инспекторе и записал его, чтобы показать вам, как применяется каждое правило.
Сначала наносится left: 50%. Затем мы выполняем отрицательный перевод. left относится к родительскому элементу, а transform относится к целевому элементу (фактическому скрытому ul).
Отлично работает! Спасибо! Использовал его на .kad-primary-nav .sf-menu>.kt-lgmenu>ul. Полный код: `.kad-primary-nav .sf-menu> .kt-lgmenu> ul {width: 520px! Important; осталось: 50%; преобразовать: translateX (-50%); } `
Можете ли вы опубликовать свой навигационный HTML и CSS?