Middle section with site logo and hamburger menu

Hi there,

I would recommend against using the Sections module. It was created before the Gutenberg editor and it should no longer be needed especially with the help of GenerateBlocks.

Are you trying to create that layout for every page?

Hi Leo,

I don't like Gutenberg and I am using the Classic Editor plugin instead.

I am only using that layout for the front page.

Hello? any advice?

I am trying Gutenberg again.., any advice on how to accomplish that layout??

Hey sorry I missed the notification on this.

Will you be using the top bar widget area?

If not then you can actually just use that for the top section. Then hide the top bar on all other pages.

Let me know :)

Hi Leo, thank you for your response:)

I am planing to use the top bar widget for occasional announcements.

Any other way to be able to get that layout?

I am trying now with Gutenmberg/GenerateBlocks for the image background on the top of the page. Is it possible to add some classes to another block (below) to pull the logo and burger menu?

I am guessing that's one way of doing it?

In that case, try adding a block element with generate_before_header hook:
https://docs.generatepress.com/article/block-element-overview/

Ok, I will try that I assume that is for the background image. I want to add a parallax effect with a hook to that background image as well, not sure if that is possible.

The layout is working now, thank you.

Now I am trying to add this Parallax hook (posted by Tom to other users) to the before header block element background image but it's not working.

https://generatepress.com/forums/topic/can-sections-already-be-replaced-by-generateblocks/

Now I wonder if the parallax will work with my setup?

function your_parallax_element( selector, context ) {
    context = context || document;
    var elements = context.querySelectorAll( selector );
    return Array.prototype.slice.call( elements );
}

window.addEventListener( "scroll", function() {
    var scrolledHeight= window.pageYOffset;
    your_parallax_element( ".your-parallax" ).forEach( function( el, index, array ) {
        var limit = el.offsetTop + el.offsetHeight;
        if( scrolledHeight > el.offsetTop && scrolledHeight <= limit ) {
            el.style.backgroundPositionY = ( scrolledHeight - el.offsetTop ) / hero.parallax + "px";
        } else {
            el.style.backgroundPositionY = "0";
        }
    });
});

Can you link me to the page in question?

Where is the code added?

Hi Leo,

I decided to wait until I advance more with the general design to implement the parallax effect. Once I have it more advanced I'll let yo know (by this post) if I am still going in that direction.

Thank you very much:)

Sounds good.