Trouble with nested function, or looking for guidance on a better solution

Keywords´╝Ü javascript bootstrap-4 nested-function


I am using bootstrap 4 and would like to change the logo and shrink the navbar on scroll, except when screen size is less than 992px. I believe a nested function may be the best option, but I can't quite get it to work.

Open to other suggestions as well. Thanks in advance...

My code below:

function myFunction(x) {
    if (x.matches) { // If media query matches
      $('.navbar-brand img').attr('src','../img/eventlogo_2019-white.svg');
    } else {
      // Collapse Navbar & Change Logo on scroll
  var navbarCollapse = function() {
    if ($("#mainNav").offset().top > 100) {
      $('.navbar-brand img').attr('src','../img/eventlogo_2019-white.svg');
    } else {
      $('.navbar-brand img').attr('src','../img/eventlogo_2019.svg');
  // Collapse now if page is not at top
  // Collapse the navbar when page is scrolled

  var x = window.matchMedia("(max-width: 991px)")
  myFunction(x) // Call listener function at run time
  x.addListener(myFunction) // Attach listener function on state changes