[Resolved] How to make a header as per docs article/how-to-create-a-page-hero/

Home Forums Support [Resolved] How to make a header as per docs article/how-to-create-a-page-hero/

Home Forums Support How to make a header as per docs article/how-to-create-a-page-hero/

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #2259898
    Alan

    Hi, I would like to make a header/hero/navigator that looks like the one at the very bottom of the article/how-to-create-a-page-hero/ .

    Sadly the article doesn’t actually tell you how to create this. Looking at the element settings – I can’t find anything that helps either.
    Also there are some dead end links in the docs – such as Page Hero Examples ( https://docs.generatepress.com/?post_type=keep_articles&p=923 ) at the bottom of the same page.

    I do have a merged page hero – that works. But the header is simply a bar across the top.
    How do I drop the header down the page to create the gap above?
    How do I set the header to be slightly transparent?

    Also when using the Element ( header block ) why is the colour picker such a basic one. Why aren’t the colours set in the Customizer picked up so I can use my theme/brand colours?

    #2259943
    David
    Staff
    Customer Support

    Hi there,

    The Header Element is quite ‘old’ now and we really own use it for making a Merged Header.
    In the future we will move the Merge options to the newer Block elements where we can use fancy things like the advanced colors.

    For now:

    1. Customizer > Site Identity – and add your Logo
    2. Customizer > Layout > Header – set the Alignment to Center
    3. Customizer > Layout > Primary Navigation – set the Location to Below Header.

    You should now have a stacked logo and navigation below layout.

    4. Add the Header Element, and enable the Merged Header option. With that enabled you can then modify header and nav colors:

    https://docs.generatepress.com/article/transparent-header-and-navigation/

    5. Set the Display Rules to where you want the merge to be applied. Any pages that are not covered, the header and nav will use the colors you set in the Customizer.

    #2260971
    Alan

    Thank you! I got it working now, I think. Have to say its a bit confusing with the settings scattered all over the place.
    Looking forward to the improved version. When you say “in the future” are you talking next version or months away?

    Re: the display rules. I’m also having difficulties with these not behaving as I’d expect.
    e.g. There is a setting for “Front Page” which I assume means the Home page … but setting that didn’t work.
    I tried using an explicit page “Home” and again that didn’t work.
    I ended up using “Entire Site” which does work but isn’t ideal for when I want different headers/heros on different pages.

    Cheers
    Alan

    #2261118
    David
    Staff
    Customer Support

    No definitive timeline on that particular change as yet, we need to do some refactoring of the elements module before we can make those changes.

    The Front Page Display Rule is the one you need for the Homepage that is set in Settings > Reading.

    Is it possible to see the page ?

    #2262074
    Alan

    Hi, Yes the “Home” page was set in Settings > Reading.

    I tried to reproduce the issue on an external site and guess what? I can’t. Its’s working correctly.
    So I went back to my Local site and removed the Entire site and specific “Home” page settings and replaced with the Front Page one, and that works as well now.

    No idea what I did wrong but happy its working now.

    Cheers
    Alan

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