We launched a site with Enfold because it was supposedly responsive. Private details below.
Hey DJQuad!
The only thing I noticed was that the menu and logo were running into each other. You can change that with this CSS.
@media (max-width:900px) {
nav.main_menu { display: none !important; }
#advanced_menu_toggle { display: block !important; }
}
Best regards,
Elliott
That didn’t help. The nav is on 2 lines overlapping the text under it.
Hi!
You could try setting the break point to a larger value:
@media only screen and (max-width: 1200px) {
nav.main_menu { display: none !important; }
#advanced_menu_toggle { display: block !important; }
}
Best regards,
Rikard
What is the *proper* break point for iPads? I’m at a loss as to why Enfold doesn’t have proper break points for iPads and other mobile screens. Suggestions on increasing the break point isn’t the solution because it will look equally as bad on larger monitors.
There’s no reason why the menu shouldn’t scale and not overlap the menu. Themes like Avada and X handle it just fine.
Hi!
It is difficult to predict every kind of logo/menu combination. In your particular case, i think the best solution would be to enable the 990px breakpoint here and reduce the font-size + padding of the menu items based on the screen size, something like this in Quick CSS will do it:
@media only screen and (max-width: 1200px) {
.responsive #top #header .av-main-nav > li > a{
font-size: 14px !important;
}
}
@media only screen and (max-width: 1100px) {
.responsive #top #header .av-main-nav > li > a{
font-size: 12px !important;
padding: 0 8px;
}
}
Cheers!
Josue