Sticky Blocks for Navigation
-
Hi, I’ve read that “Sticky Blocks” are included in Gutenberg 15 and wondered if (or, when) that feature is available to wordpress.com users?
Reading about it, here: https://wptavern.com/gutenberg-15-0-introduces-sticky-position-block-support-adds-paste-styles-option
…I looked and it appears that there is a “sticky” option for a “Group” in Editor > Template Parts > Header, wherein my wish is to keep the Navigation in place (not to move when scrolled).
However, when I select the “Group” – which includes a Cover, Site Logo, Spacer, Stack (Site Title, Navigation) – and both unclick “Inner blocks use content width” & also set Position to “Sticky”, and then Save (twice), I’m not seeing the menu stick to the top?
Any help is appreciated, thanks.
The blog I need help with is: (visible only to logged in users)
-
I’ve now moved the Navigation Block out of the (above) aforementioned Group, and assigned it as being a Group by itself. As such, it is sticking at the top, but only until the Cover Block scrolls off screen – then, the Navigation Block (a sticky group) also scrolls off screen?
-
Hi there,
From what I can see by examining your template in the Site Editor, the sticky group is contained within the header, which means it will stay sticky as long as the header is in view, but stay visible as you scroll beyond that point.
Instead you may wish to edit the template to make the sticky group a top-level element in the template, so it is outside of the header.
This will allow the group to stay in view no matter how far down on the page you scroll. You can see how this is done in the video I have linked here.
Hope that helps. Please let us know if you have any more questions.
-
Thanks for your reply and video.
In addition to the Header Template Parts, I’ve added the Navigation sticky group as a top-level element in the following Templates: Home, Index, Page, Archive & Single.
As such, the sticky menu option is working fine…except that a 25 pixel (white) gap has now appeared between the Navigation and the Cover image (header)?
Not sure why, but I’d like to remove this gap.
Any help is appreciated – thanks again.
-
Hi! I’m not seeing the gap at the moment – this is how it appears for me using Firefox on Mac, but Chrome’s appearing the same way:
Had you updated the padding or margin settings in the Site Editor to change this?
-
Thanks, staff-95percentghost.
I should have marked this as resolved, as I received an email earlier from “Henry Cee” at Support providing CSS which removed the gap…here:
header {
margin-block-start: 0 !important;
} -
- The topic ‘Sticky Blocks for Navigation’ is closed to new replies.
WordPress.com Forums 