[Resolved] Merge header on specific page and force burger menu

Home Forums Support [Resolved] Merge header on specific page and force burger menu

Home Forums Support Merge header on specific page and force burger menu

  • This topic has 5 replies, 2 voices, and was last updated 5 years ago by Tom.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #852297
    Jasmin

    Hi there,

    awesome theme! I have 3 questions:

    1. I am trying to merge the header on a specific page (see website URL), but it doesn’t work. I tried it with the page as a normal page and with sections. Both versions don’t work. I want to use the featured image in the header. However, in general featured images on pages are hidden. Is it still possible to merge it on this specific page? What do I do wrong?
    See the settings here:
    http://relaunch.packlisten.org/wp-content/uploads/merge1.png
    http://relaunch.packlisten.org/wp-content/uploads/merge2.png
    http://relaunch.packlisten.org/wp-content/uploads/merge3.png

    2. I want the navigation to float right as you can see on screens which are >= 1100px wide. On very small screens it changes to a burger menu, which is fine, too. But on screens between these extreme cases, e. g. with a width of 950px, the navigation drops below the logo (still floating right). I know the setting in the customizer where you can force it to drow below the logo. But actually I’d like it to become a burger menu as soon as it doesn’t fit in anymore (<1100px). Could I do this with CSS?

    3. How did you set the background image here: https://generatepress.com/premium/ Is it for the whole content or for the first section or with the header background setting in the customizer? How large should the image be?

    Thank you!
    Jasmin

    #852893
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    1. Hmm, all looks ok there. Are you sure the page you set in the Display Rules is the page you’re targeting? What if you apply it to a different page? Still nothing?

    2. The easiest way to do this right now is to use the Mobile Header (https://docs.generatepress.com/article/mobile-header/) in our 1.8.0 version, which is currently available for public testing: https://generatepress.com/gp-premium-1-8/

    It has an option to set the breakpoint for the mobile header.

    3. The background on our site is set to the <body> element.

    #853146
    Jasmin

    Hi Tom,

    thank you!

    2. Mobile header: perfect, I updated to 1.8 and that helped!

    3. Background images: Alright, which size do you recommend for background images (body)?

    1. yes, it’s targeted on the right page. Applying it to a different site or a specific post doesn’t have an effect either.

    I have another header-element defined for the entire site which is the Analytics code. I thought, this may cause a conflict, because there I have no-merge and no-background-image defined. So I moved this element to the trash. Now the header merges, but it still doesn’t show the image: http://relaunch.packlisten.org/packlisten-fuer-die-reise-festivals-backpacking-und-mehr-2/ It is also strange that the header appears contained, although it’s defined to be full size in the element.

    #853648
    Tom
    Lead Developer
    Lead Developer

    3. This depends on what screen sizes you’re wanting to accommodate. Background images are tough because they have to be quite big, and that leads to big file sizes. We’re using an SVG image so it scales and isn’t huge in file size.

    1. Does the Page Hero area have any content in it? If not, you need to at least add an HTML comment to it:

    <!-- page hero -->

    As for the analytics code, use the Hook Element for that: https://docs.generatepress.com/article/hooks-element-overview/

    #853724
    Jasmin

    1. Alright, thank you!

    3. Ah, I didn’t know that I have to put an HTML comment to it. That alone isn’t enough by the way. I also have to define padding values, too. Without it, it doesn’t show anything. Now it works. Perfect.

    Thank you!

    #853842
    Tom
    Lead Developer
    Lead Developer

    Glad I could help! 🙂

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.