Sticky menu – Libre 2

  • Author
    Posts
  • #3419817

    esionuk
    Member

    Hello,

    I have found the sticky menu jumps down to size and also makes the page jump. I have padded the top of my #content section which helps a little however, I would prefer the ‘header’ section to stay the same size and layout it becomes once scrolled.

    I hope this makes sense.

    Thanks in advance of reading this if you have :)

    The blog I need help with is esionnoise.com.

    #3420683

    supernovia
    Staff

    Hi @esionuk, took a look at the site but didn’t see the jump issue you’re referring to. Can you send more details? Let us know what browser and browser you’re using, what window size you’re using, what you’re clicking on, etc.

    This can page help with a few of the browser details:
    https://www.whatsmybrowser.org/

    #3421299

    musicdoc1
    Member

    Hi folks. On my desktop PC I’m seeing a small jump during scrolling on https://esionnoise.com/. As soon as I being scrolling down, the logo is immediatley greatly reduced in size, which causes the entire page to jump up a little. The change in size of the logo doesn’t occur on a mobile devices, so the jumping is also absent.

    #3421303

    musicdoc1
    Member

    The change in size of the logo also doesn’t occur on larger desktop screens, according to my tests at various screen resolution testing sites, although the results were inconsistent across those sites for moderate sized screens such as the 1280 X 1024 resolution of my desktop.

    #3421338

    Thanks for all the testing musicdoc1 :) Which browser did you reproduce the issue in? I will work on it from my side.

    #3421360

    musicdoc1
    Member

    You’re welcome, liz : )
    browser: FF 72.0.1

    #3421364

    musicdoc1
    Member

    Correction to an earlier post:

    “As soon as I begin scrolling down”

    #3421451

    kokkieh
    Staff

    @musicdoc1

    That is normal – that jump is unavoidable as the layout gets adjusted the moment the site switches from the fixed to the sticky menu.

    @esionuk

    I would prefer the ‘header’ section to stay the same size and layout it becomes once scrolled.

    The following CSS should help:

    /*Prevent resizing of header on scroll*/
    .sticking .custom-logo {
    	max-width: 300px;
    	max-height: 150px;
    }
    .sticking .site-description {
    	display: inline-block;
    	margin-bottom: 0px;
    }
    .sticking .site-content {
    	padding-top: 115px;
    }

    You’ll still see a very slight jump just after you start scrolling down. That’s unavoidable – to prevent it would require modifying the JavaScript code that determines when to switch from the fixed menu to the sticky one.

    #3422280

    esionuk
    Member

    Thank you to everyone for your help. I assume amending the JavaScript is not possible with WordPress websites?

    #3422307

    supernovia
    Staff

    @esionuk, you could with the Business plan — or if you’re managing your own hosting, maintenance, and security you can modify it on your own copy of WordPress.

    http://en.support.wordpress.com/code/

You must be logged in to reply to this topic.