Change hamburger menu colour before fly-out on two specific pages

Hi everyone,

On the mobile version of my site, the hamburger menu icon is white, which is not a problem for most of the site, but it is a problem on the privacy policy page and the imprint page, and this is because the top of those pages are white, and so you can’t see the hamburger menu icon (because it’s white on white).

My question, how do I change the hamburger menu icon colour so that it’s black beforehand, and how do I do this for ONLY the privacy policy page and the imprint page?

I added in this custom CSS (see below) to the top of my quick CSS section, and as you can see I tried to reflect the page ID’s for those two specific pages in the code. But I’m not very experienced with coding, so maybe I got something wrong? Maybe I put some pieces of code in the wrong order?

I’m also not sure if I used the correct page ID’s?

/*BEGIN:This is the code for changing colour of hamburger menu to black before on privacy policy and imprint pages*/
@media only screen and (max-width:767px) {
.responsive .page-id-3#top .page-id-693#top .av-hamburger.is-active .av-hamburger-inner,
.responsive .page-id-3#top .page-id-693#top .av-hamburger.is-active .av-hamburger-inner:before {
background-color: black !important;
},
.responsive .page-id-3#top .page-id-693#top .av-hamburger.is-active .av-hamburger-inner:after
}

I’ve added my login details below, so that you can check on whether I have the correct page ID’s.

Thanks!

Chris