Change color of hamburger menu on hover/click

Question

Let me just say that my knowledge in coding is very minimal. I am trying to figure out how to turn the hamburger menu from the current color to white when the cursor hovers it or when you click it. I hope that makes sense! It will be three white lines on a black background, so it will be visible.

I have tried adding color: #fff; but I think there needs to be some specific line of coding to actually change the hamburger menu on hover/click. I am unaware of this code.

Please let me know if I included the right CSS for what I am asking about! I added the custom js in case it is needed!

 /* Header */
  .header-wrap #logo {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    font-size: 2em;
    text-align: center;
  }
  .header-wrap #logo #wsite-title {
    font-size: inherit !important;
  }
  .header-wrap .wsite-logo {
    padding: 0 50px;
  }
  .header-wrap .wsite-logo a img {
    max-height: 40px;
  }
  .header-wrap .search {
    display: none;
  }
  .header-wrap .nav-wrap {
    position: fixed;
    display: table;
    background: @shade;
    top: 0;
    left: 0;
    z-index: 15;
    height: 55px;
    -webkit-transition: all 610ms cubic-bezier(0, 0.8, 0.55, 1);
    -moz-transition: all 610ms cubic-bezier(0, 0.8, 0.55, 1);
    -ms-transition: all 610ms cubic-bezier(0, 0.8, 0.55, 1);
    -o-transition: all 610ms cubic-bezier(0, 0.8, 0.55, 1);
    transition: all 610ms cubic-bezier(0, 0.8, 0.55, 1);
  }
  .header-wrap .nav-wrap ul {
    padding: 0 4em;
  }
  .header-wrap .hamburger {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 30px;
    height: 30px;
    padding: 10px;
    cursor: pointer;
  }
    .header-wrap .hamburger span,
  .header-wrap .hamburger span:before,
  .header-wrap .hamburger span:after {
    position: relative;
    display: block;
    width: 20px;
    height: 2px;
    background: @color;
    content: '';
  }
  .header-wrap .hamburger span {
    top: 10px;
    left: 4px;
    margin: 6px 0;
  }
  .header-wrap .hamburger span:before {
    top: -8px;
  }
  .header-wrap .hamburger span:after {
    bottom: -6px;
  }

jQuery(function($) {

  // Mobile sidebars
  $.fn.expandableSidebar = function(expandedClass) {
    var $me = this;

    $me.on('click', function() {
      if(!$me.hasClass(expandedClass)) {
        $me.addClass(expandedClass);
      } else {
        $me.removeClass(expandedClass);
      }
    });
  }

  var haberdasherController = {
    init: function(opts) {
      var base = this;

      // Add classes to elements
      base._attachEvents();

      setTimeout(function(){
        base._addClasses();
        base._checkCartItems();
      }, 1000);
    },

    _addClasses: function() {
      var base = this;

      // Add placeholder text to inputs
      $('.wsite-form-sublabel').each(function(){
        var sublabel = $(this).text();
        $(this).prev('.wsite-form-input').attr('placeholder', sublabel);
      });

      // Add fullwidth class to gallery thumbs if less than 6
      $('.imageGallery').each(function(){
        if ($(this).children('div').length <= 6) {
          $(this).children('div').addClass('fullwidth-mobile');
        }
      });
    },

    _stickyFooter: function() {
      var stickyFooterMargin = $('#footer-wrap').height();

      $('.wrapper').css('margin-bottom', -stickyFooterMargin);
      $('#footer-wrap, .sticky-footer-push').css('height', stickyFooterMargin);
    },

    _checkCartItems: function() {
      var base = this;

      if($('#wsite-mini-cart').find('li.wsite-product-item').length > 0) {
        $('#wsite-mini-cart').addClass('full');
        base.cartHasItems = true;
      } else {
        $('#wsite-mini-cart').removeClass('full');
        base.cartHasItems = false;
      }
    },

    _attachEvents: function() {
      var base = this;


      $('.hamburger').on('click', function(e) {
        e.preventDefault();
        $('body').toggleClass('nav-open');
      });

      // Pad header on mobile

      setTimeout(function(){
        if($(window).width() < 992) {
          $(".banner-wrap").css({"padding-top" : $(".header-wrap > .nav-wrap").height() + "px"});
        }
      }, 800);

      // Copy login and search to mobile nav
        var login = $("#member-login").clone(true),
          search = $("#wsite-header-search-form").clone(true)
        $("#navmobile .wsite-menu-default").append(login).append(search);


      // Menu text alignment
      if($('.search').is(':empty') || $('.search').css('display') == 'none') {
        $('.menu').css('text-align', 'center');
      }

      // Store category dropdown
      $('.wsite-com-sidebar').expandableSidebar('sidebar-expanded');

      // Search filters dropdown
      $('#wsite-search-sidebar').expandableSidebar('sidebar-expanded');

      // Init fancybox swipe on mobile
      if('ontouchstart' in window) {
        $('body').on('click', 'a.w-fancybox', function() {
          base._initSwipeGallery();
        });
      }

      // Init sticky footer
      if($(window).width() > 992) {
        base._stickyFooter();
      }
    },

    _initSwipeGallery: function() {
      var base = this;

      setTimeout(function(){
        var touchGallery = document.getElementsByClassName('fancybox-wrap')[0];
        var mc = new Hammer(touchGallery);
        mc.on("panleft panright", function(ev) {
          if (ev.type == "panleft") {
            $("a.fancybox-next").trigger("click");
          } else if (ev.type == "panright") {
            $("a.fancybox-prev").trigger("click");
          }
          base._initSwipeGallery();
        });
      }, 500);
    }
  }

  $(document).ready(function(){
    haberdasherController.init();
  });
});