Как центрировать меню витрины?
Чтобы воспроизвести мою проблему, перейдите на демонстрационную страницу витрины магазина здесь: https://demo.woothemes.com/storefront/ и удалите узел <ul id = "site-header-cart" class = "site-header-cart menu"></ul>, содержащий коробку тележки (справа от меню), чтобы главное меню было само по себе.
Вот где я застрял, я не могу понять, как центрировать меню.
Я пробовал много разных комбинаций, но просто не могу понять, что происходит с CSS WooCommerce / storefront. Это не имеет никакого смысла для меня.
Вот что у меня работает ...
.woocommerce-active .site-header .main-navigation {
width: 100%;
}
#menu-primary-menu {
display: table;
margin: 0 auto;
}
Но я понятия не имею, почему он работает только с display: table. Я пробовал использовать flexbox, но правила flexbox нигде не работают! Это так сбивает с толку - делать что-то настолько простое.
Привет, Адам, мой сайт находится на моем локальном хосте, но он идентичен демонстрации, на которую я ссылался в своем сообщении выше, нестандартной теме витрины магазина, с той лишь разницей, что я удалил элемент корзины.
Ответы 1
Вы слишком задумываетесь об их стилистическом выборе. Вместо этого вы можете попробовать следующее:
@media (min-width: 768px){
.woocommerce-active .site-header .main-navigation {
width: 100%;
margin: 0;
text-align: center;
}
}
Он работает, удаляя ограниченную ширину и немного больше поля, которое толкало «тележку». Теперь, когда он на всю ширину, вы можете просто центрировать текст:
Потрясающе, отлично работает. Совершенно чрезмерно обдумываю это. Спасибо вам за помощь!
можете ли вы добавить html-код или добавить фрагменты кода