Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • October 14, 2017 at 2:29 pm #864267
    goch

    Hi

    Testing my website (in chrome or firefox) and reducing the width of the page (to see tablet and then mobile behaviour), I see that my website does not behave correctly :

    the main content has a wrong Y offset : too small in tablet and too large in mobile (can be tested with the link attached).

    I have the following header options :

    – Sticky Header
    – Shrinking Header
    – Unstick topbar

    the problem only appears when having the “Sticky Header” option (disabling it resolve the issue, but disabling only “shrinking” or “unstick” does not).

    Any idea why is that?
    or css workaround to resolve that and always have the main content starting at the right place?

    thanks,
    Charles

    October 14, 2017 at 3:04 pm #864276
    Mike

    Hey goch,
    Try this code in the General Styling > Quick CSS field:

    @media only screen and (max-width: 766px) { .page-id-62 .avia-builder-el-2 {padding-top: 0px!important; margin-top: -40px!important; }}
@media only screen and (min-width: 767px) and (max-width: 999px) { .page-id-62 .avia-builder-el-2 {padding-top: 60px!important;}}

    Best regards,
    Mike

    October 14, 2017 at 4:20 pm #864289
    goch

    Hi Mike,

    the issue is not on a single page, it’s on all the website pages.
    So I added that css :

    @media only screen and (max-width: 766px) { .avia-builder-el-2 {padding-top: 0px!important; margin-top: -40px!important; }}
@media only screen and (min-width: 767px) and (max-width: 999px) { .page .avia-builder-el-2 {padding-top: 60px!important;}}

    That works on the “faq” and “support” pages, but it won’t work on all pages (try the ‘downloads’ page for example).
    Is there any single css trick that could work on all pages?
    I guess the best would be to resolve the cause of the issue, that must come from a bad header size calculation somewhere I guess.

    • This reply was modified 7 years, 2 months ago by goch.
    October 14, 2017 at 5:13 pm #864303
    Mike

    Hi,
    Sorry, I thought it was only on that page.
    Please remove the code and disable the caching plugin (autoptimize) to see if that changes issue.

    Best regards,
    Mike

    October 14, 2017 at 5:35 pm #864306
    goch

    I cleaned the caches and desactivated the plugins but still have the same issue.
    I also tried to switch to the Enfold theme (and not my child theme) on my local website copy, and the issue is also there, so that does not come from my css or functions.
    Anything else I can check?

    October 14, 2017 at 8:20 pm #864334
    Mike

    Hi,
    Try this for all pages in tablet view:

    @media only screen and (max-width: 989px) and (min-width: 768px){
.responsive.html_mobile_menu_tablet.html_header_top.html_header_sticky #top #wrap_all #main {
    padding-top: 128px!important; 
}}

    For the mobile view issue, the only pages that had the issue was FAQ & Support, both which have a empty cell at the top of the page, so try this:

    @media only screen and (max-width: 767px) { .page-id-64 .avia-builder-el-1,.page-id-62 .avia-builder-el-1 {display:none!important;}}

    Best regards,
    Mike

    October 15, 2017 at 10:00 am #864459
    goch

    For the mobile view issue, the only pages that had the issue was FAQ & Support, both which have a empty cell at the top of the page, so try this:

    Ah, good catch! that was because I had grids when the left column was empty. so I fixed that in the layout builder rather than in the css.

    Regarding the padding issue in the tablet view your css works fine, thanks!

    But is it an enfold bug that should be fixed?
    I noticed that the bug disappears if I remove the “Header Phone Number/Extra Info” in the “header extra elements”, so the issue is probably about the height of that top-bar not being taken into account in the tablet view?

    • This reply was modified 7 years, 2 months ago by goch.
    October 15, 2017 at 3:58 pm #864501
    Mike

    Hi,
    Glad to hear this helped, I have submitted this issue to the devs for review.
    We will close this now, thanks for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘wrong main content position when using sticky header’ is closed to new replies.