Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #1059970

    Hi,

    Two problems:

    1. I’m having issues with the colour of quit icon (the X) in the fly-out panel of the mobile menu. I changed the colour of the hamburger from black to white, which is what I need. However, because the flyout menu is white, when the fly-out menu is open, the quit icon can no longer be seen. So, I need the hamburger to be white (which it is right now, so that’s fine), but then I need it to change to black when the fly-out menu opens up (in other words, the quit icon (X) needs to be black, and the hamburger icon needs to be white).

    2. In the desktop version, I have a transparent menu at the top, which becomes an opaque white sticky menu when you scroll down. The text in the transparent menu is white (which is great), and then it changes to black when the (now sticky) menu becomes white. So that’s all fine. However, the search icon doesn’t change colour. It still remains white, and so it can’t be seen when the sticky menu is active. So the search icon also needs to change to black in sticky menu mode.

    Thanks for helping with this!

    #1059973

    As an FYI, here is everything I currently have in my Quick CSS the relates to the mobile menu:

    #av-burger-menu-ul li a:hover {
    background-color: #bfbfbf !important;
    }

    @media only screen and (max-width: 767px) {
    .av-hamburger-inner:before {
    background-color:white !important;
    }
    }

    @media only screen and (max-width: 767px) {
    .av-hamburger-inner {
    background-color:white !important;
    }
    }

    @media only screen and (max-width: 767px) {
    .av-hamburger-inner:after {
    background-color:white !important;
    }
    }

    And this is the Quick CSS relating to the search icon:

    #menu-item-search a:before {
    color:white !important;
    }

    #1060009

    Hi sheilaregan,

    1. Please add this css code:

    @media only screen and (max-width:767px) {
      .responsive #top .av-hamburger.is-active .av-hamburger-inner, 
      .responsive #top .av-hamburger.is-active .av-hamburger-inner:before, 
      .responsive #top .av-hamburger.is-active .av-hamburger-inner:after {
        background-color: black !important;
      }
    }

    2. Please add this css code I would suggest to insert this code before any media queries.

    #menu-item-search a:before {
        color: black !important;
    }
    
    .av_header_transparency #menu-item-search a:before {
        color: white !important;
    }

    Hope this helps.

    Best regards,
    Nikko

    #1060062

    Hi Nikko,

    Brilliant stuff, both your solutions worked! Thanks!

    Just one more thing: on the mobile phone, the search icon is still white when the fly-out menu comes out, and so you can’t see it against the white fly-out menu. How do I make the search icon black in this case?

    #1060923

    Hi Nikko (or anyone),
    Would it be possible to please get some help on my final question above – how do I make the search icon turn black when it’s against the white fly-out menu in the mobile phone version?
    Thx!

    #1061189

    Hi sheilaregan,

    It is actually covered by the flyout and the color cannot be adjusted by the css when the flyout is open, it will require JavaScript code to do that.

    If you need further assistance please let us know.
    Best regards,
    Victoria

    #1061488

    Hi Victoria,
    Thanks for your response. I don’t think that the flyout menu covers the search icon because I can still tap the search icon when the fly-out menu is open and get the search bar to pop up.
    Either way, could you give me the JavaScript code that can change this, ie. change the colour to black?
    Thanks so much!

    #1061782

    Hi sheilaregan,

    Try adding this css code in Quick CSS:

    @media only screen and (max-width:767px) {
      #top #header #menu-item-search a:before {
        color: black !important;
      }
    }

    Best regards,
    Nikko

    #1065413

    Hi Nikko,

    Thanks for your response.

    I pasted in your code, and while it worked for making the search icon black on the fly-out menu, it also made it black before the fly-out menu comes out (which doesn’t work for me as it’s now too difficult to see against the background of my mage banner
    I modified the code to this:

    @media only screen and (max-width:767px) {
    #top #header #menu-item-search a:before {
    color: white !important;
    }
    #top #header #menu-item-search a:after{
    color: black !important;
    }
    }

    … but that just made it white before and still white afterwards (which is the original problem).

    Any more suggestions?

    Thanks so much for your help on this!

    #1066009

    Hi sheilaregan,

    I have adjusted your Quick CSS code.
    Let us know if you need further assistance.

    Best regards,
    Nikko

    #1066456

    Hi Nikko,

    Thanks so much for your work on this – I appreciate it!
    Unfortunately though, while problems 1 and 2 from the very top (my first post) are sorted out, the search icon is still showing as white (i.e. you can’t see it) when the fly-out menu is open on the mobile phone. (see my third post in this thread on January 29, 2019 at 3:53 pm)
    I’m sorry thst stil problem is still persisting!
    Maybe there’s a code somehwere in my Quick CSS that is clashing?

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.