Hi,
The problem
When using bottom menu + sticky header, for viewports between 898px and 768px, we get a gap of around 50px between the header and the main content. I believe this is not intentional, I mean a design decision, as it wastes valuable space above the fold in mobile devices like tablets. You can see it on Enfold’s demo Enfold Theme Demo | Home v6: Classic 4 Column
The solution
Adjust the stylesheet layout.css in order to get the appropriate padding-top for the main content div. For example, for a large header (I mean not slim or custom height), we should have something like:
.html_header_top.html_header_topbar_active.html_header_sticky.html_large.html_bottom_nav_header #top #main {
padding-top: 148px (instead of 198px);
}
Here you have a link to a screenshot with some comments: http://grab.by/LZom
Regards,
Diego
Hey Diego!
Try adding this to your custom CSS.
@media screen and (max-width: 898px) and (min-width: 768px) {
.html_header_top.html_header_topbar_active.html_header_sticky.html_large.html_bottom_nav_header #top #main {
padding-top: 148px !important;
}
}
Best regards,
Elliott
Hey Elliot,
That is what I had done. Is it going to be merged in a future update?
Thanks!
Best regards,
Diego
Hey!
I added it to our buglist. It will most likely get sorted in the next update.
Regards,
Elliott
Hey Elliott,
Thanks for letting me know!
Regards,
Diego