Hi,
I’ve been using enfold for some time and love most of it. However, this issue keeps arising with every install I use. Sometimes code in the forums works and other times its doesn’t.
Seems like this is something that should be addressed in the theme files.
When you create a menu and a graphic logo the menu almost always will overlap the logo upon resizing the screen even with the settings being “activate for smart phones and tablets”
I tried scaling the text on smaller screens like this:
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
.avia-menu-text {
font-size: 70% !important;
}
}
But it doesn’t work
Also tried this:
@media only screen and (max-width: 1024px) {
#mobile-advanced, #advanced_menu_toggle, #advanced_menu_hide { display: block; }
nav.main_menu { display: none; }}
#wrap_all {
position: relative !important;
}
but doesn’t work.
The site is: http://commonlot.com/
You can see it here: http://www.screencast.com/t/gGYCgu5ghV
Please help.
Thank you
Hi acbrent25!
Please refer to this post as well – http://kriesi.at/documentation/enfold/menu-overlaps-logo-on-tablets/
If that too does not help, please create a temporary admin login and post it here privately.
Best regards,
Yigit
Still not helping.
I created an admin account and details are in private area.
Thank you
Hi,
We have added this code to the Quick CSS section under Enfold > General Styling :
@media only screen and (max-width: 1324px) {
nav.main_menu {display:none !important;}
#advanced_menu_toggle, #advanced_menu_hide {display:block !important; }
}
Best regards,
Vinay
Thanks so much!