• Linda

    (@lindali2007)


    On a device smaller than 1025px (mobile menu appearance) the content (except the header section) appears only after scrolling down.
    How can this be solved?

    The page I need help with: [log in to see the link]

Viewing 9 replies - 1 through 9 (of 9 total)
  • Hello there,

    Sorry I didn’t get what really becomes an issue here. But please try adding the below CSS code to Appearance > Customize > Additional CSS from dashboard.

    
    @media only screen and (max-width: 1024px) {
      .site-header.float-header {
        padding: 20px 0;
      }
      .home header .site-logo {
        max-height: 150px !important;
      }
    }
    

    Regards,
    Kharis

    Thread Starter Linda

    (@lindali2007)

    Unfortunately, that didn’t solve the problem. I will try to explain it a bit more:

    When you visit my one-page website on a device smaller than 1025px (this is the breaking point where the mobile menu (hamburger-menu) changes to a regular menu), you only get to see the sydney hero slider. The rest of the page (content / page-wrap) is empty. When you scroll down, the content suddenly appears.
    When you refresh the page, the content is empty again. So you have to scroll down before the content will appear.

    Hello there,

    Sorry, I am not sure where the issue appears. But try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    
    @media only screen and (max-width: 1024px) {
      .site-header.float-header {
        padding: 20px 0;
        position: relative !important;
      }
    }
    

    If it doesn’t help, please take a screenshot and share it to cloudup.com and post its link in your comment reply.

    Regards,
    Kharis

    Thread Starter Linda

    (@lindali2007)

    Hello,

    It didn’t help. Please look at the screenshots I made. The one with the white space underneath the slider is when you load the page. After you scrolled down, the content appears (look at the second screenshot). I’ve installed the theme again and deactivated all plugins but the issue remains.
    https://we.tl/t-ZxIWJbmJJT

    Hello there,

    It looks strange to me because it loads fine on my phone. Please check your web browser’s version and use the latest one. Also please check with other mobile devices.

    Regards,
    Kharis

    Thread Starter Linda

    (@lindali2007)

    Hi,
    I’ve checked other browsers and mobile devices. The screenshots I send you where made on my desktop with mobile view. Also I use the latest version of the browser. Everywhere I checked, the same problem occurs. So, when you load the site the first time, it looks good. But when you refresh the page, the content is gone. I think it has something to do with the responsive Hero slider. In the customizer on the dashboard you can choose the setting for mobile devices: full screen or responsive. I have chosen ‘responsive’.

    Hello there,

    I am really clueless. You may not believe it, but it appears like this on my phone. I used Safari and Chrome.

    Regards,
    Kharis

    Thread Starter Linda

    (@lindali2007)

    The problem is solved. In the ccs I found the next line:
    .elementor-invisible {
    visibility: hidden;
    }
    I’ve set it to visible.

    Great! Glad to hear you’ve got it resolved.

    Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

    Regards,
    Kharis

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Content (except header) appears only after scrolling on small devices’ is closed to new replies.