Mobile burger menu appears in the wrong color

  • Resolved lenaschallhammer

    (@lenaschallhammer)


    4 years, 3 months ago

    Hello,

    first of all thank you so much for this great theme!

    I’ve got the following problem: In the mobile version the burger menu appears in white on the index site and turns into a dark grey when scrolling down as I used a light green background color for the header. But when opening the site with safari on an iPhone and scrolling back up after scrolling down on the index page the burger menu remains dark grey and is not visible on my background.
    The “wrong color” appears to be the secondary text color but doesn’t change when I adapt it. Anyway I don’t have this problem with the other elements in the header such as the logo and the search icon and only in the mobile version.

    Thank you in advance for your help!

    Best regards from Austria, Lena

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Theme Author Anders Norén

    (@anlino)

    Hi @lenaschallhammer,

    Glad you like it! I can’t replicate the issue when visiting the site now. Has it been fixed?

    — Anders

    Thread Starter lenaschallhammer

    (@lenaschallhammer)

    Thank you for your answer!

    Unfortunately it hasn’t been fixed. Did you open the website on a mobile phone with safari, then scrolled down and back up on the index page?

    I am attaching a picture of what it looks like after I scrolled back to the top of the page: The burger menu in the top right corner of the header displays in a dark grey color that seems invisible in front of the picture.

    https://merge.lena.gws.rocks/wp-content/uploads/2020/12/IMG_2688.png

    Thread Starter lenaschallhammer

    (@lenaschallhammer)

    Please use this new link.

    https://merge.lena.gws.rocks/wp-content/uploads/2021/01/IMG_2688.png

    Thread Starter lenaschallhammer

    (@lenaschallhammer)

    I solved the problem by adapting some code lines in the additional css section. Leaving it here in case someone else struggles with the same problem. Obviously you’ll have to exchange the hex codes.

    .nav-toggle .bars {
    color: #fff}

    .header-inner.is-sticky .nav-toggle .bars {
    color: #393531}

    I seem to have a similar issue with https://frimodigkyrka.se. On Safari for Mac the hamburger icon at first is the correct color (negative, white). When I scroll down the icon turns positive (black) just like it should. When i scroll back up though the icon don’t turn white again. Everything works fine in Chrome so it seem to be safari specific.

    Thread Starter lenaschallhammer

    (@lenaschallhammer)

    What you describe sounds like the exact problem I had. Have you tried adding my adapted CSS lines in the additional CSS section?

    If you only have the problem on certain pages you can use the following code, just change the page id’s and colors so they fit your project:

    .page-id-7 .nav-toggle .bars {color: #fff !important;}

    .page-id-7 .header-inner.is-sticky .nav-toggle .bars
    {color: #393531 !important;}

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Mobile burger menu appears in the wrong color’ is closed to new replies.