Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #535469

    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

    #535636

    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

    #535640

    Hey Elliot,

    That is what I had done. Is it going to be merged in a future update?

    Thanks!

    Best regards,
    Diego

    #536779

    Hey!

    I added it to our buglist. It will most likely get sorted in the next update.

    Regards,
    Elliott

    #536787

    Hey Elliott,

    Thanks for letting me know!

    Regards,
    Diego

    #537181

    Hi,

    Glad we could help, please let us know if you have any further questions on the topic.

    Thanks,
    Rikard

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.