![Check out Enfold](https://kriesi.at/wp-content/themes/kriesi/images/banner-enfold.jpg)
Tagged: full-width submenu
-
AuthorPosts
-
April 10, 2019 at 7:40 pm #1089239
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 #1091196Hey 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,
IsmaelApril 16, 2019 at 4:17 pm #1091493I’ve provided the link in the private content.
April 18, 2019 at 12:14 am #1092180Hi,
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,
IsmaelApril 18, 2019 at 12:37 am #1092187I 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 #1092761Hi,
Hm, thank u for the feedback. Allow us some more time to review. Maybe the media queries do have some issues.
Best regards,
BasilisApril 19, 2019 at 10:50 pm #1092771We’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 #1093190Hi,
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,
IsmaelApril 23, 2019 at 9:19 pm #1093747I’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 #1093749The 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 #1094260Hi,
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,
IsmaelMay 3, 2019 at 10:24 pm #1097031I’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 #1097934Hi,
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 -
AuthorPosts
- You must be logged in to reply to this topic.