Как изменить в wordpress цвет фона меню мобильной навигационной панели с прозрачного до indi go при нажатии кнопки меню?

Question

Используя wordpress, я создал прозрачную панель навигации внутри фотографии с помощью bs4navwalker (https://github.com/nicgene/bs4navwalker#bs4navwalker). В десктопной версии все выглядит нормально.

But in the mobile version the menu entries overlay with text on the page, after clicking on the navbar menu button.

I would like to change the background color of the menu to indigo as soon as somebody clicks on the mobile navbar menu button. The button itself should stay as it is, if it has not been clicked on it.

So far I have tried to find appropriate classes, in which I would like to change the properties via css, but I have not found the appropriate ones within the bs4navwalker.php file.

Inside the theme's header.php the navbar is declared:

'primary', 'theme_location' => 'top', 'container' => 'div', 'container_id' => 'navbarCollapse', 'container_class' => 'collapse navbar-collapse', 'menu_id' => ложь, 'menu_class' => 'navbar-nav mr-auto', 'depth' => 0, 'fallback_cb' => 'bs4navwalker :: fallback', 'walker' => new bs4navwalker ()]); ?>

My css is

.indigo{
background:rgba(63,81,181,0.90); /* indigo, 4th value is alpha, better than opacity, which makes also the font transparent  */
color: white !important;  /* font color for transition */
transition: background-color 1s ease 0s;

.transparent{
background:rgba(255,255,255,0.0);

.solid{
  background-color:rgba(63,81,181,0.75);  /* indigo */
  color: #ffffff !important;  /* font color */
  transition: background-color 1s ease 0s;
  }

И я применил прозрачный класс к панели навигации только для одной страницы веб-сайта через javascript функция navbar_transparent (). Я также применил функцию navbar_animation (), которая превращает панель навигации в панель навигации solid, как только пользователь прокручивает страницу более чем на 25 пикселей вниз.

function navbar_transparent(){
jQuery('.navbar').removeClass('indigo');
jQuery('.navbar').addClass('transparent');

function navbar_animation(){
  jQuery(document).ready(function() {
  // Transition effect for navbar
  jQuery(window).scroll(function() {
  // checks if window is scrolled more given value, adds/removes solid class
  if(jQuery(this).scrollTop() > 25) {
    jQuery('.navbar').addClass('solid');
    }else{
     jQuery('.navbar').removeClass('solid');
    }
  });
});
}

Есть ли у кого-нибудь подсказка?

Answer 1

Думаю, вы можете попробовать это решение:

Добавьте фильтр в свои функции. php.

function device_body_class ( $classes ) 
{
   $detect = new Mobile_Detect;
   $mobile = $detect->isMobile();
   $tablet = $detect->isTablet();
   if ( $mobile ) {
        $classes[] = 'mobile';
        if ( $tablet ) {
            $classes[] = 'tablet';
        } else {
            $classes[] = 'phone';
        }
    } else {
        $classes[] = 'desktop';
    }
    return $classes;
}
add_filter( 'body_class', 'device_body_class' );

А затем в своем стиле. css, вы можете иметь что-то вроде:

.desktop .my-navbar-class{
 // do whatever
}
.mobile .my-navbar-class{
 // do whatever
}
 
.tablet .my-navbar-class{
 // do whatever
}

Answer 2

После некоторых экспериментов я нашел ответ. Он основан на требовании, чтобы элемент nav имел только один из трех цветовых классов одновременно: прозрачный, indi go или solid. Кроме того, функция navbar_animation () влияет только на панель навигации, если ширина окна составляет не менее 768 пикселей, из-за медиа-запроса. Другими словами, в мобильном представлении функция navbar_function не действует. Это достигается измененными функциями javascript:

function navbar_transparent(){
  jQuery('.navbar').removeClass('indigo');
  jQuery('.navbar').addClass('transparent');
  jQuery('.navbar-toggler').click(function(){  // navbar should have only one of the three color classes: transparent, solid, indigo
      var el = document.getElementById('navbar_0');
    if(el.classList.contains('transparent')){
      jQuery('nav').removeClass('transparent');
      jQuery('nav').addClass('solid');  // switch to solid
      }
    else if(el.classList.contains('indigo')){
      jQuery('nav').removeClass('indigo');
      jQuery('nav').addClass('solid');  // switch to solid
      }
    else if(el.classList.contains('solid')){
      jQuery('nav').removeClass('solid');
      jQuery('nav').addClass('transparent');  // switch back to transparent
    }    
  })
}
function navbar_animation(){
  jQuery(document).ready(function(){
    // Transition effect for navbar
    jQuery(window).scroll(function(){
      // checks if window is scrolled more given value, adds/removes solid class
      var x = window.matchMedia("(min-width: 768px)") // perform transition to indigo navbar only, if in desktop view
      if(x.matches){
        var el = document.getElementById('navbar_0');
        if(jQuery(this).scrollTop() > 25){  // if scrolled enough, make navbar indigo
          if(el.classList.contains('transparent')){
            jQuery('.navbar').removeClass('transparent');
            jQuery('.navbar').addClass('indigo');
            }
          }
        else{
          if(el.classList.contains('indigo')){  // if scrolled up again, switch back to transparent navbar
            jQuery('.navbar').removeClass('indigo');
            jQuery('.navbar').addClass('transparent');
            }
          }
        }
      });
    });
  }