Тема витрины магазина Woocommerce Панель поиска товаров в центре страницы
У меня есть сайт электронной коммерции WordPress raceamaron.com
на сайте панель поиска расположена вверху страницы с правой стороны. Но я хочу по центру. Как изменить порядок столбцов внутри заголовка с помощью CSS.
Упрощенный пример:
header {
width: 100%;
background-color: firebrick;
display: flex;
}
.logo,
.search{
width: 25%;
}
.nav {
width: 50%;
}
<header>
<div class = "logo">
<p>logo</p>
</div>
<div class = "nav">
<p>Home contact ...</p>
</div>
<div class = "search">
<input type = "text" placeholder = "search">
</div>
</header>
Представьте скриншот моего сайта (панель поиска справа)
и это так, как я хочу (центр страницы)
Ответы 1
Поскольку это WordPress, и вы не можете изменить макет HTML, я сделал следующее исправление CSS.
Я добавил display: flex к обертке из 3 блоков внутри заголовка. Затем я добавил атрибуты заказа
к элементам, чтобы упорядочить их по своему вкусу, затем я также добавил ширину и заменил поля на отступы, чтобы не заставлять какой-либо элемент переходить на следующую строку.
/* Header Wrapper */
.site-header .col-full {
display: flex;
}
/* Site Logo */
.site-header .site-branding {
order: 1;
width: 25%!important;
margin-right: 0!important;
padding-right: 10px;
}
/* Searchfield */
.site-header .site-search {
order: 2;
width: 50%!important;
padding-right: 20px;
}
/* Navigation */
.site-header .secondary-navigation {
order: 3;
width: 25%!important;
margin: 0!important;
}
Результаты
Здравствуйте, @Fuziion. Я отредактировал ваш ответ, пометив его как ОТВЕТ. В настоящее время он находится на рассмотрении.
Только что заметил, что ввел неправильный идентификатор, я одобрил ваше изменение
Привет, @Fuziion, предоставление стилей по идентификатору не работает, я попытался изменить его с
#site-headerна.site-header, и это сработало.