Привет и спасибо заранее,
ПРИМЕЧАНИЕ: сайт NSFW, просто некоторые электронные книги для взрослых (романтика и тому подобное, но обложки электронных книг могут быть горячими).
Мое окружение:
У меня WP с woocommerce, магазином + книжный магазин, детская тема
У меня есть плагины Snippets, куда я добавляю весь свой код PHP
И я добавляю CSS в Custom CSS в настройщике
Теперь проблема:
Я не могу понять, как сделать отзывчивым заголовок сайта, верхнюю панель навигации и логотип + кнопки.
Дело в том, что я мог бы получить некоторые стили для заголовка Top, используя немного PHP и CSS, НО, когда я перехожу на мобильное представление, Top nav var, header, logo и menu сходит с ума!
Мне нужно это исправить, я не знаю, что попробовать (я много гуглил, пытался изменить значения,%, с плавающей запятой, встроенный, блок, важно, что угодно), но я не могу получить правильный совет.
Я не знаю, переопределяет ли моя попытка дочерняя тема или сама витрина, возможно, мне нужно отцепить какую-то функцию.
Может быть, это так же просто, как сложить все 3 фрагмента PHP в один тег div и много spans, но я не могу понять, как меня сегодня сжигают.
Буду благодарен за любой совет.
Вот мой CSS
/* Logo size for mobile site */
@media screen and (max-width: 768px) {
.site-header .site-branding img {
max-height: none !important;
max-width: none !important;
width: 322px !important;
}
}
/*Remove title from Shop page*/
.woocommerce-products-header
{display: none;}
/*Hide Pages Tite with custom Class added to PHP snippets*/
.hidetitle .entry-header {
display:none;
}
/*Make primary Pages full width*/
body.woocommerce #primary {
width: 100%;
}
/*Align Search Bar and make text pink*/
#woocommerce-product-search-field-0 {
display:inline-block;
width:100%;
color: #fe00a1;
border: solid 1px #fe00a1;
}
/*Edited Cart*/
#site-header-cart{
padding-bottom:20px;
width:15%;
}
/*Changed cart icon bag f\290 to to cart icon f\217 */
.site-header-cart .cart-contents:after,
.storefront-handheld-footer-bar ul li.cart > a:before {
content: “\f217”;
}
/*Align Help link*/
#help{
display:inline-block;
padding-left: 35px;
padding-right: 35px;
}
/*Align Gift card*/
#gift-cardl{
margin-left:80px;
}
/*Add top padding to rectangle*/
#rectangle {
padding:17px;
}
**PHP snippets**
add_action( ‘storefront_header’, ‘header_custom_gift_button’, 40 );
function header_custom_gift_button() { ?>
<span>
<button id=”gift-cardl”>Gift Card</button>
</span>
<?php
}
add_action( ‘storefront_header’, ‘header_custom_help_link’, 40 );
function header_custom_help_link() { ?>
<span style=”width:100%;”>
Help
</span>
<?php
}
add_action( ‘storefront_header’, ‘header_custom_subscribe_button’, 40 );
function header_custom_subscribe_button() { ?>
<button class=”subscribe_newsletter_btn”>Get Daily Book Bargains</button>
</span>
<?php
}