メニューボタンがクリックされるとすぐに、モバイルナビゲーションバーメニューの背景色を透明からインディゴにワードプレスで変更するにはどうすればよいですか？

WordPressを使用して、bs4navwalker（https://github.com/nicgene/bs4navwalker#bs4navwalker）を使用して写真内に透明なナビゲーションバーを作成しました。デスクトップ版では問題ないように見えます。

ただし、モバイルバージョンでは、ナビゲーションバーメニューボタンをクリックした後、メニューエントリがページ上のテキストでオーバーレイされます。

誰かがモバイルナビゲーションバーのメニューボタンをクリックしたらすぐに、メニューの背景色をインディゴに変更したいと思います。ボタンがクリックされていない場合、ボタン自体はそのままである必要があります。

これまで、cssを介してプロパティを変更したい適切なクラスを見つけようとしましたが、bs4navwalker.phpファイル内に適切なクラスが見つかりませんでした。

テーマのheader.php内で、navbarが宣言されています。

<nav id='navbar_0' style="postion: relative;" class="navbar navbar-default navbar-expand-md navbar-light fixed-top indigo topBotomBordersIn">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <?php
    wp_nav_menu([
    'menu'            => 'primary',
    'theme_location'  => 'top',
    'container'       => 'div',
    'container_id'    => 'navbarCollapse',
    'container_class' => 'collapse navbar-collapse',
    'menu_id'         => false,
    'menu_class'      => 'navbar-nav mr-auto',
    'depth'           => 0,
    'fallback_cb'     => 'bs4navwalker::fallback',
    'walker'          => new bs4navwalker()
    ]);
  ?>
</nav>

私のCSSは

.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（）を介して、Webサイトの1ページのみのnavbarに透過クラスを適用しました。また、関数navbar_animation（）を適用しました。この関数は、ユーザーがページを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');
    }
  });
});
}

誰かがヒントを持っていますか？