Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #1246330

    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-inner,
    .responsive .page-id-3#top .page-id-693#top .av-hamburger-inner:before {
    background-color: black !important;
    .responsive .page-id-3#top .page-id-693#top .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.




    Also to note:
    I adapted this custom CSS from a previous solution I used for another site where I needed to change the colour of the hamburger menu icon for AFTER the fly-out menu comes out (NOT before). So maybe I also made a mistake in the code when adapting it for being beforehand.


    Hi Chris,

    Please try the following in Quick CSS under Enfold->General Styling:

    .page-id-3 .av-hamburger-inner, .page-id-3 .av-hamburger-inner:before, .page-id-3 .av-hamburger-inner:after, .page-id-693 .av-hamburger-inner, .page-id-693 .av-hamburger-inner:before, .page-id-693 .av-hamburger-inner:after {
      background-color: #000;

    Best regards,


    That worked perfectly!
    Thanks Rikard, you can close this thread.


    Hi Chris,

    Great, I’m glad that you got it working and thanks for the update. I’ll close this thread for now then, please open a new thread if you should have any further questions or problems.

    Best regards,

Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Change hamburger menu colour before fly-out on two specific pages’ is closed to new replies.