Need to put a layer of Teal color on all the sections when Hamburger is clicked and then remove it when Hamburger is closed

I want to make the color of the sections change when Hamburger is clicked and then remove that color once again when the Hamburger is closed. I have attached an image of how I want it to look like. Any help?

Page Link:

https://ferret-harpsichord-wap4.squarespace.com/landing

Passcode:
cd4321

Add to Website Tools (under Not Linked) > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $('.icon').click(function(){
        $('#myLinks').toggleClass('change-color');
    })
});
</script>
<style>
  div#myLinks.change-color {
    background-color: #b9d6d2 !important;
}
</style>

14 hours ago, tuanphan said:

Add to Website Tools (under Not Linked) > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $('.icon').click(function(){
        $('#myLinks').toggleClass('change-color');
    })
});
</script>
<style>
  div#myLinks.change-color {
    background-color: #b9d6d2 !important;
}
</style>

 

@tuanphan this changes the color of the hamburger menu itself which is not what I want. I want to change the background of the section on which the hamburger menu is opened. See the attached pic for reference. There is a layer of teal color on the section on which the hamburger menu is opened.

You mean change color of all sections on current page when click burger? or add a color overlay over page?

@tuanphan yeah I want to add a color over the whole page, and that color should go away when it is clicked on again. Hope you get what I mean. Exactly like the pic provided. 

Because your code is in a section, so difficult to achieve this. (It's difficult because if you overlay the whole page, it will overlay the Dropdown Menu. And because the Dropdown Menu code is inside in a Code Block in a Section. We cannot adjust its z-index so that it is outside the overlay.) 

Can you move all code from Code Block to Landing Page Code Injection Header? I will give code to adjust position of dropdown menu then.

Then I can test & send overlay code easier.