Sticky menu – Libre 2

esionuk · Member · Jan 13, 2020 at 3:06 pm
Copy link

Add topic to favorites
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: (visible only to logged in users)
supernovia · Staff · Jan 15, 2020 at 12:42 am
Copy link
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/
musicdoc1 · Member · Jan 15, 2020 at 10:57 pm
Copy link
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.
musicdoc1 · Member · Jan 15, 2020 at 11:13 pm
Copy link
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.
staff-zinnia · Staff · Jan 16, 2020 at 12:15 am
Copy link
Thanks for all the testing musicdoc1 :) Which browser did you reproduce the issue in? I will work on it from my side.
musicdoc1 · Member · Jan 16, 2020 at 12:32 am
Copy link
You’re welcome, liz : )
browser: FF 72.0.1
musicdoc1 · Member · Jan 16, 2020 at 12:34 am
Copy link
Correction to an earlier post:

“As soon as I begin scrolling down”
kokkieh · Staff · Jan 16, 2020 at 6:33 am
Copy link
@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.
esionuk · Member · Jan 17, 2020 at 7:41 pm
Copy link
Thank you to everyone for your help. I assume amending the JavaScript is not possible with WordPress websites?
supernovia · Staff · Jan 17, 2020 at 8:23 pm
Copy link
@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.

Add Code to Your Site

No items found.