Hey @markc
One way I can think to do that would be to use Sticky positioning on the Header. You can apply the ‘Sticky’ position to a Group Block to make it stay in position while the content scrolls.
https://wordpress.org/documentation/article/position-settings-overview/#sticky
You could try this out with an existing Group block on your Header (or add a group around the main content first, and apply it to that).
Thread Starter
markc
(@markc)
Hey, thanks again @jordesign. I tried applying Sticky to each of the Groups and Rows I have in the Header, but none of them are sticky or fixed. I hope it’s a bug with 6.3-rc1 because I have done this with other themes in previous years, and it worked as I expect, or by applying a negative margin-top to the Cover block.
I need to apply some animated nav shrinking and color change on scroll to the header nav, so it looks like I will have to start applying some custom CSS and Javascript anyway. Actually, I have no idea how to add some JS in the block editor.
I didn’t expect converting a Kadence + Kadence Blocks theme would be all that easy, and it’s not. A day later and I have a half working nav and a hero section… no transparent and sticky nav yet… and certainly not animated.
Hi @markc – do you have a URL of the page/site where you have that happening and I can take a look?
I need to apply some animated nav shrinking and color change on scroll to the header nav, so it looks like I will have to start applying some custom CSS and Javascript anyway. Actually, I have no idea how to add some JS in the block editor.
In terms of Javascript – it’s not really something designed to be added in the block editor. It’s something you could include in your site using a plugin like https://wordpress.org/plugins/wp-headers-and-footers/
Thread Starter
markc
(@markc)
@jordesign, my staging site is on a local VM, so I could set up a proxy to it. If you email me (in my profile, I think it’s public) then I’ll set up a proxy and provide the login details if you care to poke around. The site I am trying to emulate is https://spiderweb.com.au and after that https://markc.blog (both rather neglected Kadence sites).
Hey @markc – thanks for explaining about the staging site – no need to worry about access to that.
In terms of the behaviour of the header – shrinking as the page scrolls – that’s not yet something that would be possible directly with the Site Editor.
Thread Starter
markc
(@markc)
Yes, I realise that shrinking the header on scroll would require custom JS, but the ease of applying a transparent and/or sticky header (sticky hopefully fixed with the release of 6.3) is, to me, a guide as to how ready the block editor on its own is ready for prime time. It’s obviously not quite there yet without additional plugins and manual CSS/JS, but it is encouragingly close.
The parts lacking are the ability to apply negative margins (on any block), being able to import local fonts (maybe in 6.4), an icon block and a way to add Javascript easily similar to CSS (perhaps locked to only administrator access).
Hey @markc
applying a transparent and/or sticky header (sticky hopefully fixed with the release of 6.3)
This is definitely something that should currently be possible. One last thing I can think to try – the Group block that you have made sticky… Is it at the very TOP level of the template (ie. not nested within anything else)?
The parts lacking are the ability to apply negative margins (on any block), being able to import local fonts (maybe in 6.4), an icon block and a way to add Javascript easily similar to CSS (perhaps locked to only administrator access).
I hear you 🙂 Improvements are always being added to the editor.
Thread Starter
markc
(@markc)
I just double-checked, yes, the Group block I am trying to make Sticky is the very first block in the template-parts header I am using. Must be a bug.
No icon block is strange, as I really expected there to be one by default.
WP 6.3 is such a major improvement that I wouldn’t even bother trying any earlier versions. Well, I did, but I ran away screaming and been looking into using Deno Fresh instead, but it’s got a long way to go before there is anything like WordPress functionality available for it.
Thread Starter
markc
(@markc)
Well, how about that. I manually added “position:fixed;top:0;” to the source in dev tools, and it does indeed become sticky with the cover block going right to the top of the page as I would expect. At least I know the Header area is indeed transparent by default. If the “html :where(.is-position-sticky)” CSS gets fixed with 6.3-ga, then that will solve a significant part of my design needs.
Thread Starter
markc
(@markc)
Rightio, I found a post that describes how to make a sticky nav header. Go to Appearance > Editor > Templates > (select template) then edit that template. Go to the List View, then select the purple “Header” area. In the three vertical dots’ dropdown menu, select “Group” so that a Group block wraps around the Header block. Now you can go over to the RHS Block tab and select the Position > Sticky option, and it will now stick on scroll.
This is NOT intuitive and took me weeks to discover!
Now that this part works, I have another problem. It starts off with a solid background colour then, when I scroll up, the menu sticks okay but with a transparent background. This is the exact opposite of what I want to achieve. I want to start with a transparent background and upon scroll up for the header area to take on a solid colour (and also shrink, but I understand that will take some custom CSS).
Would anyone have a clue how to apply Sticky to a grouped Header block such that it becomes transparent, and the page background shows through?
Hi @markc – the changing of appearance (size and transparency) of the sticky header block is something that would need to be triggered by Javascript – it’s not possible for it to be handled only by CSS.
In terms of what could be achieved natively in Gutenberg (without need of a plugin or custom coding) I think it’s something that would be a little beyond that.
