Как изменить фон элемента .navbar при раскрытии .navbar-collapse?

Здравствуйте.

У меня имеется вот такой код на Pug:

nav#hw-navbar.navbar.navbar-toggleable-sm.navbar-light.bg-faded.fixed-top
    a.navbar-brand(href="#") Nx
    button.navbar-toggler.navbar-toggler-right(type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation")
      i.fa.fa-bars
    #navbarSupportedContent.collapse.navbar-collapse
      ul.navbar-nav.mr-auto
        li.nav-item.active
        ...

Я делаю его прозрачным таким кодом:

#hw-navbar * {
  background-color: transparent;
}

А позднее делаю его непрозрачным при скроле:

$(window).scroll(function() {
    const 
        scrollTop   = $(this).scrollTop(),
        height      = startScreen.container.height(),
        opacity     = (scrollTop < height) ? scrollTop / height : 1;
    navBar.css({
        'background-color': `rgba(46, 52, 64, ${opacity})`
    });
});

Только вот если экран у нас оказывается узким, то весь .navbar у нас сворачивается в небольшую менюшку выезжающую по нажатию на .fa.fa-bars. Проблема в том, что в данном случае её нужно сделать непрозрачной при нажатию на кнопку. Ясно что можно с нуля переписать обработчик события нажатия по .fa.fa-bars, но это не выглядит как best choise, хорошо бы какой нибудь middleware вставить перед обработчиком, но о его наличии в jQuery я не осведомлён. Может кто-нибудь подскажет лучшее решение?