Archived topic
Sidebar higher up
3 replies · Started by gedosan on June 25, 2021
Hi Guys
Looked around but couldn't figure this one out. I'm using a 'block-page hero' hook on my posts, and happy with that. The thing is I'd like my sidebar to come up higher (so the top is in line with my featured image).
I tried doing this within the block-page hero hook - added a column block and set it to 66/33 which worked, but not on mobile (the sidebar appears directly below the featured image when I do that, rather than after the content at the bottom).
Hoping this is a quick one.
Many thanks
Ged
Hi there,
you would need to remove the featured image from the Hero Block so it is displayed in the default position above the content. Then we could use some CSS to overlap the hero.
This is what i would do:
Edit the Hero Block:
1. remove the Featured Image, and re-enable the featured image option so the image is displayed in the content.
2. Select the Parent Container Block.
2.1 Give it some Bottom Padding - which should be the height of the image - eg. 400px for Desktop and 300px for mobile.
2.2 In Advanced > Additional CSS Class(es) add: hero-block-overlap
NOTE i notice in your hero block there is an empty Text block below it - select it and backspace delete it or the next step wont work.
Once thats done check the site to see the image is back in the content and there is the padding space above it.
Then add this CSS:
/* Desktop overlap */
.hero-block-overlap + #page {
position: relative;
margin-top: -400px;
}
/* mobile overlap */
@media(max-width: 768px) {
.hero-block-overlap + #page {
margin-top: -300px;
}
}The only alternative to that is to add another column in your hero - beside the featured image and include some widget/blocks in that column.
Thanks David, very helpful as ever.
Ged
Glad to be of help.
