Changing Color of a Burger Menu Depending on Background

Changing colors of the bars in a burger menu depending on background-color is not straight forward. I ended up using JavaScript, and it is still not working very well.

3444 views

By. Jacob

Edited: 2018-06-08 11:53

As part of an exam project, recently I had to change the color of a burger menu depending on the background color beneath it, and of cause I was the one getting to do the coding. This turned out to be a hugely challenging task, and in the end I ended up with a nasty hack rather than a real CSS based solution. I was also forced to use JavaScript, which is a big no-no for layout purposes. The menu changing colors was a requirement by another designer in our group.

I would never attempt this myself unless I had a real CSS solution. But, explaining why you should not use a certain approach that appears to work – but still not completely in all circumstances – can be very difficult. Often people will think you are just incompetent or lazy, so I try to avoid discussions it, and instead allow them to learn the hard way themselves.

The "hack" is quite simple. It works by changing the color after scrolling past the site header. I could only get away with this because the site-header had a dark background on our website, so this solution will not work for everyone.

The whole process reminded me why I used to hate front-end design, especially when I am not making all design decisions. You might have a designer less experienced at coding, and they might decide on something that is simply not possible with current technology. Personally I prefer to avoid JavaScript for layout purposes, so I will usually always try to find pure CSS solutions before resorting to JavaScript.

As far as I know, a simple CSS sulution does not exist for this. I even tried using CSS filters, but that only seemed to work on the parent element, and not if you had position:fixed; on your menu. Ideally it should work depending on the visual background, and not which element came as the parent. So, I ended up using JS.

The triggering code looks like this:

//The below code calls "scrollFunction()" to change the color of the burgerMenu when needed
//Because of design-requirements, this is only needed on some pages. I.e. Some pages has a white #site_header and others have a video or an image.
if (!document.querySelector('#site_header_follow_black')) {
  // If the header background is dark, switch to white burgerBar's in the #burgerMenu
  window.onscroll = function() {
    scrollFunction();
  };
}

The scrollFunction():

function scrollFunction() {
  if (menu_state_open == false) {
    if (document.body.scrollTop > window.screen.height-100 || document.documentElement.scrollTop < window.screen.height-100) {
      toggleBurgerColor();
    }
  }
}

This will change the color of the burger menu when scrolling past a certain point. In this case 1 x height of screen minus 100px (the height of the burger). Our header has a height of 100vh which makes it fill the height of the screen.

Note. Personally I am not a fan of such types of layouts – while they work for mobile devices, they are very bad on PCs. I hate when text, images and videos automatically scales to fit my screen. Do not do this!!!

function toggleBurgerColor() {
  let chosenColor = '#000';
  if ((document.querySelector('#site_header_black')) && (menu_state_open!==false)) {
    // Change burgerBar color to white if burgerMenu is open AND element ID "site_header_logo_white" exists
    chosenColor = '#fff';
  } else {
    chosenColor = '#000'; // Else we change color of burgerBars to black
  }
  document.querySelector('#burgerBar1').style.background = chosenColor;
  document.querySelector('#burgerBar2').style.background = chosenColor;
  document.querySelector('#burgerBar3').style.background = chosenColor;
}