-
Posts
-
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!
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;
}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,
NikkoHi 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?
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!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,
VictoriaHi 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!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,
NikkoHi 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!
Hi sheilaregan,
I have adjusted your Quick CSS code.
Let us know if you need further assistance.Best regards,
NikkoHi 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?Hi sheilaregan,
I apologize for the delayed response.
I have added this css code in Quick CSS just above the media queries:.av-burger-overlay-active .av_header_transparency #menu-item-search a:before { color: black !important; }Best regards,
Nikko
- The topic ‘Mobile (hamburger) colour change in Fly-out menu and Search icon colour change’ is closed to new replies.