Changing the Color of the Burger Icon for the Mobile View of my Squarespace website

Hello, I am trying to change the color of the burger icon for the mobile version of my Squarespace website. Can someone help me with this?

The site url is: https://oceangrove.church

The password to my website is: stpaulsstaff

For all pages or which page?

for all pages! I want to change the burger icon the blue color for all the pages, so it matches the logo. And when the user clicks the burger icon, I want it to change to white every time.

Add this to Design > Custom CSS

body:not(.header--menu-open) #header:is(.bright, .dark, .dark-bold, .black, .black-bold) .burger {
    background-color: var(--tertiaryButtonBackgroundColor) !important;
}

Is there a way to make the burger icon blue only when the logo is blue?

Code can target the following cases

• Burger menu is open or closed
• One page, some specific pages, all pages

It cannot recognize when the logo is blue to do this.

Okay, and how would I write the code to target a specific page?

Just add this code to that page Header

<style>
  body:not(.header--menu-open) #header:is(.bright, .dark, .dark-bold, .black, .black-bold) .burger {
    background-color: var(--tertiaryButtonBackgroundColor) !important;
}
</style>

Hey, so the code only works when I inject it on the header of the home page. Could you edit the code to make it so I can add it to any page to change the burger icon to blue?

18 hours ago, Richard06 said:

Hey, so the code only works when I inject it on the header of the home page. Could you edit the code to make it so I can add it to any page to change the burger icon to blue?

Use this. If it doesn't work, please share link to a page + keep code in page header, we can check easier

<style>
  body:not(.header--menu-open) #header .header-burger .burger {
    background-color: var(--tertiaryButtonBackgroundColor) !important;
}
</style>