- This topic has 13 replies, 2 voices, and was last updated 2 years, 4 months ago by David.
-
AuthorPosts
-
December 21, 2021 at 1:38 am #2055282Dmitrii
My ads and table of contents appear over my stick header whenever I scroll down / past them.
What’s the best way to fix this? Added my website link.
December 21, 2021 at 4:56 am #2055417DavidStaffCustomer SupportHi there,
try adding this CSS to increase the sticky nav / mobile headers z-index:
#mobile-header, .sticky-enabled .main-navigation.is_stuck { z-index: 1000000 !important; }
December 21, 2021 at 5:23 am #2055444DmitriiThanks David – it was happening on desktop as well, but it seems my desktop header is no longer sticky, so I can’t show an example of it.
So:
– How could I make the header “sticky” again on desktop?
– How should I modify the code so that it applies to all devices (desktop, tablet, mobile)Thanks!
December 21, 2021 at 5:39 am #2055457DavidStaffCustomer SupportIn Customizer > Layout > Sticky Navigation, make sure that is enabled and set it to Desktop only as your Mobile Header is enabled and already sticky..
The CSS i provided covers the desktop and mobile sticky.
December 21, 2021 at 6:20 am #2055503DmitriiThanks David, I tried that earlier, but the header actually changes significantly.
Is there a way to keep it sticky and retain exactly how it appears when you first land on the page? Same height, spacing, etc.
December 21, 2021 at 6:29 am #2055512DavidStaffCustomer SupportDisable the Sticky Nav.
Keep the CSS i provided earlier.
And add this CSS:@media(min-width: 769px) { .site-header { position: -webkit-sticky; position: sticky; top: 0; z-index: 1000000; } }
December 22, 2021 at 12:04 am #2056376DmitriiIt seems to be working on mobile & tablet, but not desktop.
And now the header does not appear on mobile for the first 3-5 seconds (there’s a delay before it appears).
December 22, 2021 at 4:40 am #2056569DavidStaffCustomer SupportIt looks fine to me on Desktop.
Mobile issues – i don’t see a delay in the header appearing, but I do see an issue with the mobile menu opening and that is due to some Javascript optimizations on the site thats deferring the scripts until user interaction. Might want to check with the optimization plugin author on that.December 22, 2021 at 10:56 pm #2057312DmitriiI’ve tried it on 4 different devices (all running Chrome) – and the issue still appears: https://pasteboard.co/gphJlCjCE1rl.png
Noted on the optimization plugin
December 23, 2021 at 7:56 am #2057756DavidStaffCustomer SupportI made a change to this CSS:
https://generatepress.com/forums/topic/ads-plugins-appearing-over-sticky-header/#post-2055512
Update your CSS to match, that should fix it.
December 24, 2021 at 2:39 am #2058295DmitriiThanks David, that worked perfectly!
Appreciate you driving this home, really happy with the support I’ve received :).
December 24, 2021 at 4:32 am #2058373DavidStaffCustomer SupportAwesome – glad to be of help!
January 1, 2022 at 4:10 am #2065474DmitriiThis worked really (maybe too well :D)!
Is it possible to have the sticky header appear only when people scroll up (as opposed to always sticky / always visible)?
Thanks!
January 1, 2022 at 6:54 am #2065545DavidStaffCustomer SupportNot using the CSS method, you would need to remove the CSS i provided and then re-enable the Themes sticky options…. we can the relook at the original issue.
-
AuthorPosts
- You must be logged in to reply to this topic.