🎉 Happy 4th of July! Get 15% off GP Premium with the discount code: 4THOFJULY2020

[Support request] Site Header Help

Home Forums Support Site Header Help

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1130772
    Ronald

    Hi There:

    I apologize if this a beginner question, but I’m not sure where/how to start with this. I’m looking to create a site header that is merged with the navigation bar where the header falls below the navigation bar. The header will be an image with text overlay and a button linking to another page.

    I read the header element documentation, but I’m a bit confused as to which steps I use to create a site header and how it differentiates from a page hero or even if they are one and the same. Essentially, I know what I want it to look like, but I don’t know where to begin.

    Is there a step-by-step process of how to accomplish this? I’m a bit of a newbie at this and tend to get lost. Also, are there ideal dimensions for the picture that goes in the header? Thanks for your guidance!

    Regards,

    Ron

    #1130881
    Leo
    Staff
    Customer Support
    #1131209
    Ronald

    Hi Leo:

    sort of something like that. Here are some examples of what I’m looking to do from other sites in my niche/industry that are also using the Generate Press Theme:

    https://expertvagabond.com/
    https://nomadicboys.com/
    https://www.nomadasaurus.com/

    I’d like to something similar to the first example but with the parallax effect from the second exmaple. Any guidance on this? Thanks in advance!

    Regards,

    Ron

    #1131235
    Leo
    Staff
    Customer Support

    Yup the header element is what your examples are using.

    Here is a step by step guide to create one:
    https://docs.generatepress.com/article/how-to-create-a-page-hero/

    And the examples of this page show some example settings as well:
    https://docs.generatepress.com/article/page-hero-examples/

    Let me know if you get stuck 🙂

    #1131549
    Ronald

    Hi Leo:

    Thanks this was helpful, just two questions:

    1. How do you get the navigation bar to go back to merging when you scroll back to the top? Currently, I can merge it, but when you scroll down to get the navigation bar to change to the normal menu, it doesn’t change back when you scroll up and it becomes static.

    2. If I don’t merge my Navigation Bar with the site header/page hero element, it disables the full-screen option under the page hero. Is there a way to make the custom image header larger and get more of the image to show without merging? Or is it possible to crop it into the current space?

    I’m playing around with different options so getting this information will be helpful. Thanks for the support!

    Regards,

    Ron

    #1132098
    Leo
    Staff
    Customer Support

    1. Sorry I am having a hard time understanding the issue here. I checked the home page and the merge option isn’t on currently. Is there a page where I can see this issue?

    2. Is this what you are looking for?
    https://docs.generatepress.com/article/faux-full-screen-page-hero/

    Let me know 🙂

    #1132114
    Ronald

    Hi Leo:

    I did some playing around with it last night and I decided I wasn’t going to merge it so just disregard my first question. In addition, I also played with the padding a bit to understand how to take up more space under the navigation bar. The only issue I have with it which I still can’t figure out is that the photo that gets used for a custom image gets cropped to fit that area. I can’t seem how to size the photo within the given space. In other words, is it possible to use the entire photo as it’s taken and shrink the size to fit the page hero element?

    I hope that makes sense, let me know if I need to clarify myself a bit. Thanks again!

    Regards,

    Ron 🙂

    #1132360
    Leo
    Staff
    Customer Support

    Background images don’t quite work like that unfortunately.

    Looks like your original image is 1204*903px. So if your screen is 1000px in width, then you see the image as cropped. However, my screen is 1960px in width so I’m actually seeing the image as zoomed out to cover my screen.

    So this is what I’m seeing currently which fills the entire container width:
    https://www.screencast.com/t/kx0wzj5Qxn

    And if we were to go with the original image size, this would be the result:
    https://www.screencast.com/t/8RZ7vl0uMW2

    Let me know which one you decide to go with 🙂

    #1132457
    Ronald

    Hi Leo:

    I see, so there is no way to have the picture in the original image size and fill the whole container?

    A few more things about this page header element:

    1. I’m trying to resize the button, add a border to it, and move the position closer to the bottom of the page here (maybe the bottom left). Is there any code in order to do that I can find somewhere? I tried googling it but came up short.

    2. How do I add a partial background overlay on the page hero? You can see an example on the text portion of the page hero found here: https://expertvagabond.com/

    Thanks again!

    Regards,

    Ron 🙂

    #1133116
    Leo
    Staff
    Customer Support

    so there is no way to have the picture in the original image size and fill the whole container?

    Not quite as shown in my screenshots illustrations above.

    A picture around 1900*900px should work pretty good for your case.

    1. The position of the page hero content is controlled by the top/bottom padding:
    https://docs.generatepress.com/article/how-to-create-a-page-hero/#step-5-position-the-content

    So if you only add top padding, your content would be at the bottom.

    2. You’d need to do this for the page hero content:

    <div class="overlay-content">
        page hero content here
    </div>

    Then add this CSS:

    .overlay-content {
        background-color: rgba(0, 0, 0, 0.5);
    }
    #1134946
    Ronald

    Hi Leo:

    I’m almost there!

    I have everything figured out except for number 2 above. When you say:

    “page hero content here”

    Does the “page hero content here” mean that’s where the rest of the code goes for the page hero or is that just the text I would want to input?

    Also when I put the CSS code in:

    .overlay-content {
    background-color: rgba(0, 0, 0, 0.5);
    }

    It doesn’t seem to be working. Clearly, I’m doing something wrong. Any advice?

    Thanks again!

    Ron 🙂

    #1135597
    Leo
    Staff
    Customer Support

    You would replace page hero content here with the actual content you want in the page hero.

    Which page can I see the page hero you’ve created?

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