How do I switch my headers using gsap and javascript?

Picture of the header

So I am currently trying to switch the headers when I click one of the icons in the footer. (Home, Specials, Reservation) Whenever I click an icon it will change the content but the header and footer stays the same... Could anyone offer any advice how to switch the headers appearance when I click one of the icons? Instead of the header saying "about" for example, when I clicked the specials button I want it to have a different background and text that says Specials. I also haven't added any content in the specials section. For now I am focusing on the header.

//! create var to target icons from selected restaurant
   var iconsTarget = restID + " .homeIcon,"  + restID + " .specialsIcon," + restID + " .reservationsIcon";
    
   //!  remove highlight and active class from all icons
   $(iconsTarget).css({background: "none"}).removeClass("active");

   //* Same as old
   //  highlight home icon and add class to load restaurant page
   $(restID + " .homeIcon").css({background: highlightColour}).addClass("active");

   //! set up section nav - highlight and load section
   $(iconsTarget).click(function() {

       // Check if selected button has active class....it is doesn't run this code
       if(!$(this).hasClass("active")) {

           // renive highlight and active class from all icons
           $(iconsTarget).css({background: "none"}).removeClass("active");

           // add highlight and active class to selected icon based on highlight colour
           $(this).css({background: highlightColour}).addClass("active");

           //! MAKE SURE YOU WRITE THE FUNCTION load selected section - send current section and section to load
           // ! MAKE SURE YOU PUT A SPACE IN THE QUOTES
           loadSection(restID + " section", restID + " " + $(this).attr("data-section"));
       }
   });

}

//! function for loading internal restaurant sections

function loadSection(prevSection, nextSection) {

    // fade out previous section
    gsap.to(prevSection, {
        opacity: 0,
        duration: 0.5,
        onComplete: function() {
            // hide and reset previous section
            $(prevSection).hide().css({opacity: 1});
            // display next section
            $(nextSection).show().scrollTop(0);
        }
    });

    // animate on next section
    gsap.from(nextSection, {
        delay: 0.5,
        opacity: 0,
        duration: 0.5
    });

    // loop through and reveal all elements on the next screen with reveal class applied
    $(nextSection + " .reveal").each(function(i) {

        gsap.from(this, {
            delay: 1 + i * 0.15,
            opacity: 0,
            y: -10,
            duration: 1,
            ease: "elastic.out" // change easing to something other than elastic
        })
    });
    
}


//! set up reservations submit button
$(".reserve").click(function(e) {
    // stops default processsing for form
    e.preventDefault();

    alert("Reservations Have been made"); // replace with reveal of actual content
});

<!-- ! *************** Header for about us  -->
    <main id="rest1">
        <header id="aboutheader">
            <img class="hamburger" src="img/menu2.gif" alt="Menu" />
            <h1 id="#about">About Us</h1>
        </header>
        
      <!-- ! *************** Header for specials  -->
        <section class="specials">
            <header id="specials_header">
                <img src="img/specials_header.jpg" alt="nightlyspecials" />
            </header>


        </section>