Q:

menu loses background color on screen change

I have a fixed left-side navigation for the desktop version of my site. The sidenav changes sides for the mobile version. I'm testing on an iPad mini. In landscape, it displays the desktop. In portrait, it displays the mobile. However, when I change orientations from portrait to landscape, the sidenav loses it's background color. If I click a link in the sidenav, it returns.
I'm using this CSS (regular):
.sidenav {
  position: fixed;
  /*width set by col2 [16.66%]*/
  height: 100%;
  left: 0;
  /*top set by $*/
  background-color: #2e2e2e;
}

This CSS (@media 768):
.sidenav {
  width: 0;
  height: 100%;
  position: fixed;
  left: auto;
  right: 0;
  z-index: 1;
  background-color: #2e2e2e;
  overflow-x: hidden;
  -webkit-transition: 1s;
  transition: 1s;
  padding-top: 15px;
}

And this jQuery:
if ($(window).width() <= 768) {
  $("#page-menu").click(function() {
    $(this).fadeOut(500,function(){
     $(this).toggleClass("fa-bars fa-close").fadeIn(500);
    });

    var twidth = $(".sidenav").width() == 0 ? "250px" : "0px";

    $(".sidenav").width(twidth);
  });
}

/*When a link is clicked*/
  $(".sidenav a").click(function(){
  /*remove all arrows*/
  $(".arrow").detach();
  /*place arrow on correct link*/
  $(this).append('<div class="arrow"></div>');

  /*remove active-link class from all*/
  $(".sidenav a").removeClass("link-active");
  /*place the link-active class on correct link*/
  $(this).addClass("link-active");

  /*display correct information for link clicked*/
  var id = $(this).attr('id');
  $(".info>div").each(function(){
    if ($(this).hasClass(id)) {
      $(this).removeClass('hidden');
    }
    else {
      $(this).addClass('hidden');
    }
  });

  if ($(window).width() <= 768) {
    var twidth = $(".sidenav").width() == 0 ? "250px" : "0px";

    $(".sidenav").width(twidth);
    $("#page-menu").fadeOut(500,function(){
      $("#page-menu").toggleClass('fa-bars fa-close').fadeIn(500);
    });
  }
});

The two bits of jQuery mess with the width of the sidenav. The links still display, but the bgc is gone. Does anyone see what could be making this happen?
Loaded in any view, I can rotate the device and everything is fine: the menu still has the bgc. It's when I'm in portrait mode (mobile), open the nav, close the nav, rotate to (desktop) that the bgc disappears.
I think the problem is that when I close the menu from the mobile version, the jQuery sets the sidenav width to 0; this new width is now an inline style, which overrides the CSS formatting. How can I now change the width back to the CSS from the jQuery?

A:

So I just added a check after everything
if ($(window).width() > 768) {
  $(".sidenav").width('16.66%');
}
else {
  $(".sidenav").width(0);
}

I just messed with the effectively inline width to set it to what it needs to be.

