Tagged: 

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • April 10, 2019 at 7:40 pm #1089239
    efgumnick

    We’re developing a site using color sections with a sticky full-width submenu. On most testing platforms, it works fine, but on an iPad in landscape orientation, the targeted content is covered up by the site header. This problem happens on the home page, as well as the Completion, Production, and Water Management pages, among others, so you can see lots of examples.

    I’ve provided a link to the site, login credentials, and a link to a screen shot in the private content.

    Please advise as to how to modify CSS, if possible, to eliminate this problem.

    Thanks!

    April 16, 2019 at 4:28 am #1091196
    Ismael

    Hey efgumnick,

    Thank you for using Enfold. And we would like to apologize for the late reply.

    The “wp-admin” or login page redirects to a maintenance mode page. Did you change the login url? Please provide it in the private field.

    Best regards,
    Ismael

    April 16, 2019 at 4:17 pm #1091493
    efgumnick

    I’ve provided the link in the private content.

    April 18, 2019 at 12:14 am #1092180
    Ismael

    Hi,

    Thanks for the update.

    Try to adjust the scroll offset value to adjust where the auto scroll lands when you click on the submenu item.

    // https://kriesi.at/support/topic/link-in-footer-to-anchor/#post-970924

    Adding a higher offset value means that it will scroll above the default position and lower value creates the opposite effect.

    Best regards,
    Ismael

    April 18, 2019 at 12:37 am #1092187
    efgumnick

    I tried that, but that changes the way the scroll behaves everywhere throughout the site and on all devices. We’re only encountering the problem on tablets in landscape orientation.

    April 19, 2019 at 10:24 pm #1092761
    Basilis

    Hi,

    Hm, thank u for the feedback. Allow us some more time to review. Maybe the media queries do have some issues.

    Best regards,
    Basilis

    April 19, 2019 at 10:50 pm #1092771
    efgumnick

    We’ve gone live with the site, even though we haven’t solved this issue. I’ve included the updated URL in the private content.

    April 22, 2019 at 2:10 am #1093190
    Ismael

    Hi,

    Thanks for the update.

    The following css code might help.

    @media only screen and (max-width: 1024px) {
.av_slideshow_full.avia-slideshow {
    min-height: calc(100vh - 50px);
    margin-bottom: 0;
}
}

    We noticed that the full screen slider is not occupying the height of the viewport on tablet screens. The css code should change that.

    Best regards,
    Ismael

    April 23, 2019 at 9:19 pm #1093747
    efgumnick

    I’m afraid that doesn’t seem to have made any difference. In any case, the problem is occurring on any page that includes a full-width submenu, whether or not they have a slider at the top. (See Production and Water Management for more examples.)

    April 23, 2019 at 9:35 pm #1093749
    efgumnick

    The problem has something to do with how far the page scrolls when you click a link in the sticky full-width submenu, but I don’t know where to look for the CSS or JS that controls that.

    April 25, 2019 at 3:16 am #1094260
    Ismael

    Hi,

    Thanks for the update.

    We can’t reproduce the issue anymore. The page scrolls or lands exactly above the section when you click on the full width sub menu anchors.
    Could you check the page again? Make sure that the page is not cached.

    Best regards,
    Ismael

    May 3, 2019 at 10:24 pm #1097031
    efgumnick

    I’m afraid that we’re still experiencing the problem, including when we tested the site on a tablet (Kindle Fire) on which we’d never viewed the site previously, and also in Chrome’s Developer Tools emulator, which should be immune to any caching issues.

    We have no problem on desktop computers or phones, only on tablets in landscape orientation. I don’t know what to try next.

    May 7, 2019 at 5:34 am #1097934
    Ismael

    Hi,

    We would like to apologize for the late response.

    We disabled the header transparency on tablet view by adding the following css code. The anchor now lands above or scrolls to the corresponding sections properly.

    @media only screen and (max-width: 1024px) and (min-width: 768px) {
.responsive.html_mobile_menu_tablet #top #wrap_all #header {
    position: relative;
    width: 100%;
    float: none;
    height: auto;
    margin: 0 !important;
    opacity: 1;
    min-height: 0;
}

#top .av_header_glassy.av_header_transparency .header_bg {
    background-color: #fff;
    opacity: 0.1;
    filter: alpha(opacity=10);
}

#top .av_header_glassy.av_header_transparency #header_main {
     background-color: #ffffff;
}

#top .av-submenu-container.av-sticky-submenu {
    position: absolute !important;
}
}

    Best regards,
    Ismael

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