[Resolved] Header Issues

[Tom]

Note: There are all kinds of questions here, but they all relate to the same thing. Thought about separate threads, but it kind of makes sense all in one place.

Page Header
The Page Header plugin in GPP is giving me fits. I think it can do what I want it to, but I feel am just missing some detail that throws it into chaos. I don’t have an actual GP/GPP link to share to share, but I did make a ridiculous mockup to show what the final site should look like (https://imgur.com/a/Gy7DJ). I’ll try my best to explain.

I basically want a full width header image area as part of my header similar to how http://demo.generatepress.com/ does it. But there are some small differences:

– The background image (it can be any size needed, I was testing with one that was 1200×500) contains a person on the right side of the image. They take up about 1/3 of the image. They are cropped out and the rest is transparent to allow for a solid color in the background.

– There is a small amount of text, just an H1 with a welcome message. It is positioned center/top.

Here are the settings I used in the newly created Page Header

Image:
Selected the image (did not use featured image)

Content:
Put an H1 tag in the html box with some dummy text.
Selected “add padding” (not sure if this adds to the padding designated in the middle column or something else)
Selected “add background image”
Selected “fullscreen”

Container: full width
Inner Container: full width
Text Alignment: center
Top/Bottom Padding: 4%

Background Color: just some random solid color

So there are two things happening:

1. The image used for the background is being enlarged. Is there some default height that GPP is trying to fill?

2. On mobile, only the solid color and text is displayed. Is there a setting to make the entire background resize to it is seen as well? I’m thinking maybe the image shouldn’t be so wide, it should just be as wide as the subject matter, then float it right which should make it appear on all screen sizes. Not too sure on that, or on the details of what this css would look like.

———————-

Separate Issue (secondary nav):

I want to use the secondary nav above the header as a sort of “top bar”. Is there a way to make it not become a hamburger on mobile? I’d like it to display as it does on the desktop. I notice the demo also has secondary nav up top and it too shows a double hamburger. That would drive me nuts!

———————-

Separate Issue (primary nav on mobile):

If you look at the mock up, you’ll see the primary nav is under the logo/header. When I shift to mobile, the nav is hamburgerized and in that same location. Is there a way to put the nav at the top ONLY for mobile?

———————-

Separate Issue (forums avatar):

Maybe I am blind, but where do I change my avatar for the GP forums? I went to generatepress.com/wp-admin to access the edit my profile link, but it redirects me to /account. Am I super blind? All I see is my name, display name, and contact info fields.

Thanks!

Other Tom

PS: there are no other addons, this is purely me testing to try and learn GP/GPP some more. If I can avoid using Elementor, I would like that (nothing against it, but part of me wanting to switch to GP/GPP is having nice clean code and less stuff built on top of it). That said, if a page builder is what I need, I have no issue getting one. If I did, I would buy Elementor Pro.

[Leo]

Hi there,

Hard to tell sometimes without seeing the site but I’ll try my best:

1. You are using full width container and the image is not wide enough so it’s resized. Try an image with width at least 1920px

2. Background images are not responsive by nature. Depending on the image, you might be able to reposition it but I can’t tell without seeing the site. Or you can switch it out for mobile like this:

@media (max-width: 768px) {
    .generate-content-header {
        background-image: url(http://URL-HERE);
    }
}

3. Check this page: https://docs.generatepress.com/article/disable-secondary-navigation-mobile-menu/

4. On top of what? Easier if you can link us to the site.

5. Use this site: https://en.gravatar.com/

[Tom]

Hi Leo, thank you for replying and sorry for the late response. I’ve been fighting a failed hdd the last few days.

I’ll give your suggestions a whirl, and agreed about the demo site. I have nothing to show. These are questions I had from notes after playing with GP/GPP for a few hours to get a feel for it. I’ve yet to actually create something. When I do, should I run into issues, I’ll certainly have something to show you.

Thanks again.

[Leo]

No problem! We will be here 🙂

[Author]

Posts