Header behavior

Home Forums Gillion Theme Header behavior

Home Forums Gillion Theme Header behavior

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • Hello, I am using the Gillion theme and noticed that the header behaves a bit strangely in some situations. If the user starts scrolling the page after the page has been rendered but BEFORE the loading animation finishes in Chrome, when scrolling back up, the header overlaps the content hiding the top part of the articles or home page.

    If however the page is NOT scrolled until the loading is fully done, this issue does not appear.

    The site is publicly available at http://www.shoppersdojo.com

    EDIT: all screenshots show the page when fully scrolled to the top.

    • This topic was modified 2 weeks, 2 days ago by kataleen2k.
    Attachments:
    You must be logged in to view attached files.

    Hi @kataleen2k,

     

    I hope you are well today and thank you for your question.

     

    The issue occurs because all the webpage resources have not loaded but you start scrolling the page causing the issue.

     

    There can be various other reasons why your site is loading slow as described in the following pages.

     

    https://www.bitcatcha.com/blog/2015/10-frustrating-reasons-why-your-website-speed-is-slow/

    https://www.pickaweb.co.uk/kb/website-running-slow/

    https://gtmetrix.com/why-is-my-page-slow.html

     

    You can improve your site performance as described in the following pages.

     

    http://www.wpbeginner.com/wordpress-performance-speed/

    https://codex.wordpress.org/WordPress_Optimization/WordPress_Performance

    https://wpengine.com/blog/page-speed-wordpress-performance/

    https://themetrust.com/test-wordpress-site-performance/

     

    To optimize images and load them faster, you can use any of the following plugins.

     

    https://wordpress.org/plugins/ewww-image-optimizer/

    https://wordpress.org/plugins/wp-smushit/

     

    Also, please use the below latest version of the theme on your website.

     


    Please login to access this file

     

    Best regards,
    Shufflehound team

    Thank you for the reply. Can you confirm that the latest beta version that you referenced fixes the issue?

    I understand that this may be caused by the loading speed, however the page is fully rendered extremely fast. Even if the browser takes a bit longer to load some last resources, I would not want to serve a broken page until all the underlying scripts finish loading.

    The speed is also affected by the user’s connection in which case again they can have a bad experience simply because it takes just slightly longer to load the page.

    Can you tell me which resource exactly causes this issue and see how we can solve it?

    The latest theme version contains some fixes and improvements but it is not related to this loading speed issue.

     

    You can find out what is causing the site to load slow and improve it by referring to the information shared on the pages that I posted in my above reply.

     

    Also, you can improve the user experience of the website by enabling the Page Loader in the theme settings as shown in the attached screenshot.

    Attachments:
    You must be logged in to view attached files.

    I improved the site loading speed but this still remains an issue. The site now takes around 1 second between start of rendering and loading complete.

    While I understand that the loading speed makes this issue more visible, I do believe this is a bug that breaks the theme in these scenarios.

    Is it possible to re-calculate the height of the “header” element with class “primary-desktop” when the user scrolls to the top? This calculation would be the same as the one that happens when the page load completes.

    Again, I appreciate the efforts in supporting the theme and I hope we can work together to figure this out.

    Yes, you can apply height to the header by adding the following CSS code in the Custom CSS code option of your theme on the below path.

     

    Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code

     

    header.primary-desktop {
        height: 265px;
    }
Viewing 6 posts - 1 through 6 (of 6 total)