I have recently encountered two issues with my mobile menu.
The 1st was weird icons , but this thread provided a fix for it… thanks Yigit!
The 2nd I can’t find any mention of. I have a transparent menu bar for my full site. The mobile menu previously worked fine, but now when the screen width reduces and the mobile menu is triggered, the menu items are shown with a transparent background. These means the text is very hard to read. Previously there was a solid background on the mobile menu so the text was more clear. How can I get this back?
And is there a way of the mobile menu using the same text styling as the main menu (same font, colour, capitalised?)
Thanks in advance
Ok the good news is after testing I have managed to get my mobile menu styled the same as the normal menu. I used this for quick CSS shortcodes. This would be a great additional option for the header > mobile menu section
#mobile-advanced a, #mobile-advanced .mega_menu_title { font-size: 20px; text-transform: uppercase ;!important; text-align: left; font-weight: bold;!important;}
span.avia-menu-text {
font-family: 'customfontnamehere';
}
However I still can’t remove the transparent background element on the menu, so any help on this would be gratefully received, thanks :D
Hi!
Please add following code to Quick CSS as well
ul#mobile-advanced {
background: white;
}
:)
Cheers!
Yigit
Ah, that’s brilliant and works perfectly. Plus I can even change white for the hex colour I need and it works too. Cool!
Thanks Yigit! :)