Я использую отдельный верхний и нижний колонтитулы для пользовательской темы WordPress WooCommerce. У меня есть проблема с заголовком магазина, navwalker bootstrap, когда мужской голос имеет некоторую подкатегорию, вызовет некоторые css проблемы на настольном компьютере и мобильном устройстве. Мне нужен способ установить цвет этих элементов навигации, теперь они получат правила css основного заголовка, которые установлены для остальной части сайта. Еще одна проблема, которую мне нужно решить, это нижняя граница при наведении, она не будет работать правильно, если у голоса мужчины есть несколько подкатегорий для связи. Вот код CSS, который я использую для эффекта наведения и для ссылки на меню:
.top {
color: white;
font-weight: 700;
font-size: 1.6em;
text-decoration: none;
padding: .8em !important;
font-family: 'Dancing Script', cursive;
}
.top::after {
content: '';
display: block;
width: 0;
height: 1px;
background: #c89;
transition: width .3s;
}
.top:hover {
color: #c89;
transition: ease-in .3s;
}
.top:hover::after {
width: 100%;
}
Вот код html меню. Мне нужно заставить его исчезать слева или справа на мобильном телефоне и взять 100% высоту экрана. Я хочу попробовать использовать контейнер и столбцы из сетки bootstrap, но я не уверен насчет этого.
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="profile" href="http://gmpg.org/xfn/11">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<nav class="navbar navbar-expand-md fixed-top woo-nav" style="background:white;">
<button class="navbar-toggler hamburger hamburger-spin" type="button" data-toggle="collapse" data-target="#navbar-shop" aria-controls="navbar-content" aria-expand="false" aria-label="<?php _e('Toggle Navigation'); ?>">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
<div class="collapse navbar-collapse navbar-content" id="navbar-shop">
<?php
wp_nav_menu( array(
'theme_location' => 'woocommerce-nav',
'menu' => 'Woocommerce Menu',
'container' => false,
'depth' => 3,
'menu_class' => 'navbar-nav mr-auto',
'walker' => new Bootstrap_NavWalker(),
'fallback_cb' => 'Bootstrap_NavWalker::fallback',
) );
?>
</div>
<?php get_product_search_form(); ?>
</nav>
Это экран проблемы, поскольку вы можете увидеть нижнюю границу под ссылкой с подменю создает проблему css: 