[Resolved] Middle section with site logo and hamburger menu

Home Forums Support [Resolved] Middle section with site logo and hamburger menu

Home Forums Support Middle section with site logo and hamburger menu

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1626965
    Kle

    Hi there,

    I wonder what’s the best method to accomplish this layout? I am doing it with the premium plugin “sections.”

    I’d like to have a middle section with a hamburger menu and the site logo in it.

    Thank you.

    website

    #1626971
    Leo
    Staff
    Customer Support

    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?

    #1627008
    Kle

    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.

    #1628144
    Kle

    Hello? any advice?

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

    #1628266
    Leo
    Staff
    Customer Support

    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 🙂

    #1628303
    Kle

    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?

    #1628305
    Leo
    Staff
    Customer Support

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

    #1628485
    Kle

    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.

    #1628593
    Kle

    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";
            }
        });
    });
    #1628601
    Leo
    Staff
    Customer Support

    Can you link me to the page in question?

    Where is the code added?

    #1633441
    Kle

    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:)

    #1633544
    Leo
    Staff
    Customer Support
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.