[Resolved] Header Woes

[Laura]

Hi there,

I’m a newb with no coding experience so css is terrifying.

I would really prefer to use GP and Premium to retain the built in functionality. I monkeyed with Elementor and I’m pretty sure I’m in over my head there, so back to basics, or so I thought.

So header is making me miserable. I have a nice logo I would like to include with the site title and tagline, but there just doesn’t seem to be a good, reliable way to include and place this in the header? I’ve cruised around quite a bit and can’t find good clear advice on how to incorporate a logo so that it behaves in all environments.

I know an alternative is to upload an image to fill the header space, but I expect that an image will behave unpredictably in mobile environments.

I could really use a clear, newb-proof solution here, if there is such a thing? 🙁

Thanks,

Laura

[Leo]

Hi there,

Any examples or mock up to show what you would like to achieve?

Like logo on the left, inside the container with the title and tagline inline on the right of it?

[Laura]

Hi there,

Yep sure. Loveormoney.ca is the address of the live site. I built that header with Elementor and optimized it. So just something to that effect. I am trying to think about how to put the Premium Headers feature to good use!

One thing I learned in my first go round with all this is that you want to standardize and automate as much as you can, which is why I thought I should use GP built in functionality as much as possible before wandering too far in to Elementor.

Thanks,

Laura

[Leo]

You are trying to re-create that page?

Try using the page header add-on for the section below the navigation: https://docs.generatepress.com/article/page-header-overview/

It’s not on every page so you can’t use the customizer/global setting.

Let me know if this helps 🙂

[Laura]

Hmmmm. Okay so what you are suggesting is that I suppress the header content (title, tagline) and then use the Header feature to build what I think is called a “hero banner?” If one saves the background image, how does that impact mobile when you are going from full width to a tablet or phone? I’m assuming it is safest to save an image as a background and then do text overlay?

Sorry if my questions are tedious. This has been a surprisingly difficult problem to solve.

Thanks so much for the help.

Laura

[Leo]

If you want to duplicate your current layout here then yes: http://loveormoney.ca/

Page header is indeed used to create hero banner.

Looking at your example site above, you aren’t using background images? Looks like there is just the background color + logo + the text.

[Laura]

Hi again Leo. Thank you so much for your patience.

In my original site, I created the content in Elementor using columns to space the content horizontally and vertically. I used a jpg for my log, and Elementor title and text widgets to create the content. I saved it as a section in Elementor, and then saved that section to a template, so the whole thing was getting quite convoluted. The upside was that the columns in Elementor nicely stacked the content vertically so that I could optimize it for mobile. It was still kind of a pain though, because as I’ve discovered (the hard way as ever), tweaking spacing for mobile is time consuming and nitpicky.

One of the reasons I started over to see what I could do *without* Elementor was to understand the architecture of WP better first, and to set good defaults for pages and blogs before I started screwing around with Elementor.

SO I could save all my content (including text, logo etc) as a jpg with no live links and insert it as a banner, but I don’t know what will happen when it goes to mobile. Presumably a wide jpeg will crop to the center and that ain’t gonna work right?

Again thanks for bearing with me here. It is helpful to go through explaining this. I’m one of these people who has to *understand* what I’m doing or I can’t do it! I think that once I understand how WP, WP Themes and page makers like Elementor work overall I’ll better be able to dip into CSS tweaks. But not yet! 🙂

Laura

[Leo]

It would actually work well if you add everything into one image and add it as a static image with <img> tag inside of page header content: https://docs.generatepress.com/article/page-header-content/

Static images resizes for mobile, background images don’t.

Let me know if this helps. 🙂

[Laura]

Well let me give that a go then, before I trouble you any further. Thank you so much.

Laura

[Leo]

No problem at all.

Let me know 🙂

[Laura]

Hello Leo,

Well I think I’ve made progress. I retained the GP nav bar and used Elementor to design a header section, and then popped the shortcode into the header content area. It seems to adjust to mobile quite nicely, and a couple of small tweaks will get the settings right. The only issue I’m having now is that there is a default header space on top of the header I’ve inserted: http://c1v.f44.myftpupload.com/about/.

In a previous post about a similar problem, you provided this css:
.separate-containers .page-header-image {
margin-top: 0;
}
The user said this fixed his problem but… errr… where do I put it???

Almost there…

[Leo]

Removing the header padding should work for you: https://docs.generatepress.com/article/header-padding/

Let me know 🙂

[Laura]

Doh! Yes. Of course that *totally* worked. Now my header is loverly and functioning across my site. You da best. Thank you! 🙂

[Leo]

Glad I could help 🙂

[Author]

Posts