Tagged: 

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • November 14, 2023 at 12:07 pm #1425561
    MM

    Hey guys,
    I have set the colour of my burger menu icon in Theme Options>>Main Menu>>Burger/Mobile Menu Styling.
    I am using a sticky header.
    My burger menu only appears on mobile devices (max-width 990px).
    I am using the following CSS to enable transparent header on mobile devices:

    /* Add Transparent Header For Mobile */
@media only screen and (max-width: 990px) {
.responsive.html_mobile_menu_tablet #top #wrap_all #header { 
        position: absolute;
}
.html_mobile_menu_tablet #top #wrap_all .av_header_transparency {
	background: transparent;
}
}

    I would like my transparent page burger menu icon set to a different colour than on all other pages it appears.

    I need the burger menu icon colour to be white on transparent header pages, but black everywhere else.

    I’m really struggling to achieve this with CSS. Any help, advice or guidance will be very gratefully accepted!

    Cheers,
    Matt

    November 14, 2023 at 12:08 pm #1425562
    MM

    My transparency menu color is also set to white.

    November 15, 2023 at 4:38 am #1425636
    Nikko

    Hi meanster99,

    I checked your site and it’s black for burger icon for every page, to make it white for transparent pages, just add this CSS code in Enfold > General Styling > Quick CSS:

    #top #header.av_header_transparency .av-hamburger .av-hamburger-inner, 
#top #header.av_header_transparency .av-hamburger .av-hamburger-inner:after, 
#top #header.av_header_transparency .av-hamburger .av-hamburger-inner:before {
    background-color: white;
}

    Best regards,
    Nikko

    November 15, 2023 at 5:45 am #1425648
    MM

    That’s great, thanks Nikko!

    There is one slight problem with it though – my flyout burger menu has a white background, and on pages with transparent headers, the close button (X) now appears white, so can’t be seen. I don’t suppose there is a way to style it black ONLY when the flyout menu is being displayed, without it also affecting the color when the menu isn’t displayed?

    Cheers,
    Matt

    November 15, 2023 at 3:27 pm #1425686
    Nikko

    Hi Matt,

    You’re welcome :)
    Please try to add this CSS code as well:

    #top #header.av_header_transparency .av-hamburger.is-active .av-hamburger-inner, 
#top #header.av_header_transparency .av-hamburger.is-active .av-hamburger-inner:after, 
#top #header.av_header_transparency .av-hamburger.is-active .av-hamburger-inner:before {
    background-color: black;
}

    Best regards,
    Nikko

    November 18, 2023 at 10:10 am #1425896
    MM

    Thanks Nikko, perfect!

    November 18, 2023 at 11:18 am #1425919
    Rikard

    Hi,

    Great, I’m glad that Nikko could help you out. Please let us know if you should need any further help on the topic, or if we can close it.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.