#css #wordpress #twitter-bootstrap #bootstrap-4 #wp-nav-walker
#CSS #wordpress #твиттер-загрузчик #начальная загрузка-4 #wp-навигатор-ходунки
Вопрос:
Я хочу изменить цвет значка на белый, но, похоже, не могу правильно настроить его. Есть ли какой-либо способ таргетинга на него из main.css или только в HTML-классе с начальной загрузкой (и если да, то как?).
HTML:
lt;header class="header" id="myHeader"gt; lt;div class="container"gt; lt;nav class="navbar navbar-expand-lg navbar-dark bg-transparent" role="navigation"gt; lt;!-- Brand and toggle get grouped for better mobile display --gt; lt;button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#bs-example-navbar-collapse-1" aria-controls="bs-example-navbar-collapse-1" aria-expanded="false" aria-label="lt;?php esc_attr_e('Toggle navigation', 'your-theme-slug'); ?gt;"gt; lt;span class="navbar-toggler-icon"gt;lt;/spangt; lt;/buttongt; lt;!-- lt;a class="navbar-brand" href="#"gt;Navbarlt;/agt; --gt; lt;?php wp_nav_menu(array( 'theme_location' =gt; 'top-menu', 'depth' =gt; 2, 'container' =gt; 'div', 'container_class' =gt; 'collapse navbar-collapse', 'container_id' =gt; 'bs-example-navbar-collapse-1', 'menu_class' =gt; 'top-bar', 'fallback_cb' =gt; 'WP_Bootstrap_Navwalker::fallback', 'walker' =gt; new WP_Bootstrap_Navwalker(), )); ?gt; lt;/navgt; lt;/divgt; lt;/headergt; CSS
header .container { height: 100%; z-index: 10; display: flex; align-items: center; position: relative; } header .container .top-bar { list-style-type: none; display: flex; } header .container .site-link, .site-logo { margin-right: auto; } header .top-bar li a { /*padding: 0 2rem;*/ padding: 2.5rem 2rem 2.5rem 2rem; color: var(--off_white); font-size: 1.3rem; text-decoration: none; z-index: 1000; } header .top-bar li.current-menu-item a { background: var(--secondary); } @media (max-width: 992px) { /* bootstrap navwalker menu */ .navbar-toggler span { background-color: transparent; color: var(--off_white) !important; border: 0; cursor: pointer; font-size: 2rem; display: block; } } Кроме того, как я могу расширить свое навигационное меню после нажатия на значок гамбургера в мобильном представлении, чтобы сделать его полноэкранным, а фон размытым? Вопрос в основном в том, как его настроить, будет ли он работать с таргетингом .верхняя панель?
Ответ №1:
Причина, по которой это происходит, заключается в том, что вы используете navbar-dark . В этом нет ничего плохого, совершенно нормально, и то же самое происходило бы с navbar-light .
Возможно, это стоит попробовать в вашем CSS. !important Я надеюсь, что вы преодолеете любой CSS Boostrap (но только для цвета кнопки, если вы не добавите больше CSS)
button .navbar-toggler{ color: white !important; } С твоим вторым вопросом. Если вы можете снова предоставить примеры кода, чтобы сделать его правильно отформатированным вопросом, я думаю, что этот вопрос может быть достоин его собственного поста. 1 сообщение 1 вопрос обычно работает лучше всего.