background/font color in mobile menu - Support | Kriesi.at

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

Author

Posts
October 9, 2019 at 10:15 am #1146446

venolab
Participant

Hi,

my header has a dark background. Unfortunately, the font color in mobile menu is black. So, nobody can read it ;) Screenshots here: https://www.dropbox.com/sh/fizcmbmafhwgvk0/AAD_oB9pNcAotxu6YU1ky-SWa?dl=0
When hovering, the background color changes to white, so everything is fine.
Where respectively how can I change these settings (background/font color inactive/active/hovering elements)?
I’ve already tried a few quick css-codes from other threads, but it doesn’t solved my problem.

Thanks a lot!

Best regards, Thomas

October 13, 2019 at 3:38 am #1147487
Mike
Moderator
Hey Thomas,
Sorry for the late reply, if I understand correctly the issue is only with the mobile menu. Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:
```
.html_av-overlay-side #top #wrap_all .av-burger-overlay-scroll #av-burger-menu-ul .av-active-burger-items a {
    color: #fff !important; 
}
#top #wrap_all #header #av-burger-menu-ul > li.av-active-burger-items.av-show-submenu > a,#top #wrap_all #header #av-burger-menu-ul > li.av-active-burger-items.av-show-submenu > .sub-menu > .av-show-submenu > a {
	color:#333 !important; 
}
```
this css will change the mobile menu text to white when the menu opens and change it to brown when the background is white, such as when a menu item is activated.
After applying the css, Please clear your browser cache and check.
Please see the screenshot in Private Content area.

Best regards,
Mike
October 13, 2019 at 12:54 pm #1147573

venolab
Participant

Hi Mike,

thanks a lot! That works very well!
But there are still some small issues (screenshots here: https://www.dropbox.com/sh/mahxbv61fcq8sbq/AACAQX9o8Qnt0QycXpkGgFXSa?dl=0
– when hovering over the main menu, the font color is white. So, that’s white font and white background.
– when hovering over a menu point and there’s a sub-page, then everything is fine with the “upper” page. But same point (see above) when hovering over other pages. The main site is then again with dark color and dark background when not hovering.

Thank you for your efforts!

Best regards, Thomas

October 13, 2019 at 4:02 pm #1147583
Mike
Moderator
Hi,
Thanks for your feedback and the screenshots, I adjusted the css and included the #808080 color for the search icon and burger menu icon to match your topbar phone number.
```
@media only screen and (max-width: 988px) { 
#av-burger-menu-ul a .avia-menu-text,#av-burger-menu-ul a .av-submenu-indicator {
	color: #fff !important;
}
#av-burger-menu-ul a:hover .avia-menu-text,#av-burger-menu-ul a:hover .av-submenu-indicator {
	color: #333 !important;
}
.html_av-overlay-side-classic #top .av-burger-overlay li li .avia-bullet, .html_av-overlay-side.av-burger-overlay-active #top .av-hamburger-inner, .html_av-overlay-side.av-burger-overlay-active #top .av-hamburger-inner::before, .html_av-overlay-side.av-burger-overlay-active #top .av-hamburger-inner::after {
  background-color: #808080 !important; 
}
#menu-item-search a:before {
	color: #808080 !important;
}
}
```
Please clear your browser cache and check.

Best regards,
Mike
October 13, 2019 at 4:10 pm #1147585
venolab
Participant
Hi Mike,

thank you very much!!!

Everything works fine – I’m happy!

Wishing you a nice sunday afternoon and a nice upcoming week.

Best regards, Thomas
- This reply was modified 5 years, 1 month ago by venolab.
October 13, 2019 at 5:38 pm #1147589

Mike
Moderator

Hi,
Glad we were able to help, we will close this now. Thank you for using Enfold.

For your information, you can take a look at Enfold documentation here
For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

Best regards,
Mike
Author

Posts

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

The topic ‘background/font color in mobile menu’ is closed to new replies.