[Resolved] Custom Header

[dlanghoff]

Hoping GeneratePress will save me time over building up from an Underscores base each time. Still learning, but searches aren’t helping much with this topic….

Most of my sites have mostly static pages, and inevitably the client wants two separate graphic elements to every page’s header. It’s hard enough to get one aligned properly sometimes (e.g., a logo on the left), let alone two (say, a call-to-action button on the right)–and each will have separate links associated with them.

Short of a custom header.php, or one huge background image (which doesn’t scale well), how are folks handling more complicated header construction–especially in the GeneratePress world?

— Dan L.

[Tom]

Hi Dan,

Couple of options:

a) Use a site logo (Customize > Site Identity) and a Text widget (Appearance > Widgets > Header).
b) Use GP Hooks in the “Before Header Content” hook:

<div class="grid-50" class="left-logo">
    First logo in here
</div>
<div class="grid-50" class="right-logo">
    Second logo in here
</div>

Then add this CSS:

@media (min-width: 769px) {
    .right-logo {
        text-align: right;
    }
}

Let me know if you need more info 🙂

[dlanghoff]

Thank you for your response!

Exploring suggestion 1 for now; the order of creation seems backwards to me (viz., header-widget, site-branding, THEN site-logo), but I’m sure there’s a good reason.

Between shortcodes (e.g., for your Columns plugin), Sections, and some Simple CSS, it’s getting hard to turn a normal user loose with the WYSIWYG editor!

[Tom]

No problem! Let me know if you need more info 🙂

[dlanghoff]

Quick follow-up on this subject: what method would you recommend for changing the creation order within the header (currently, I’m assuming it’s header-widget, site-branding, then site-logo)? I’d rather go logo-title-widget, as I think it would look more natural as screen width decreases.

— Dan

[Tom]

Hi Dan,

You can use this CSS to rearrange stuff on mobile:

@media (max-width: 768px) {
	.inside-header {
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-flow: row wrap;
		flex-flow: row wrap;
 	}
    
	.site-branding {
		-webkit-box-ordinal-group: 2;
		-moz-box-ordinal-group: 2;
		-ms-flex-order: 2;
		-webkit-order: 2;
		order: 2;
	}
    
	.site-logo {
		-webkit-box-ordinal-group: 1;  
		-moz-box-ordinal-group: 1;     
		-ms-flex-order: 1;     
		-webkit-order: 1;  
		order: 1;
	}

	.header-widget {
		-webkit-box-ordinal-group: 3;
		-moz-box-ordinal-group: 3;
		-ms-flex-order: 3;
		-webkit-order: 3;
		order: 3;
	}
}

Let me know if you need more info 🙂

[dlanghoff]

Thanks VERY much. That was a new one on me!

I have other GP “theory” questions, but I’ll start another topic.

— Dan L.

[Tom]

You’re very welcome 🙂

[Erik]

Hi, how can i put two images between the logo and header widhet?

[Tom]

You can split your header up using GP Hooks: https://generatepress.com/forums/topic/2-sides-to-the-header-widget/#post-228923

[Erik]

Thanks Tom. But do you have a solution for iPad?
On a pc the header is splitted in 3 parts next to each other but on a iPad under each other.

[Tom]

You would just need to add the tablet-grid-* class to the elements:

<div class="grid-33 tablet-grid-33 header-left">
    Left area content (phone number etc..)
</div>
<div class="grid-33 tablet-grid-33 header-center">
    <img src="URL TO YOUR LOGO" alt="" />
</div>
<div class="grid-33 tablet-grid-33 header-right">
    Right area content (icons etc..)
</div>

[Erik]

Thanks, that’s the solution

[Tom]

You’re welcome 🙂

[John]

Hi Tom,

I’m a newbie to wordpress site creation, but was quite taken with the GeneratePress theme and have now purchased your GP premium plugin and like it a lot.

However, I’m getting a little frustrated trying to customize the header with a background image and text on your GeneratePress child theme.

I get the image in OK, but when I test it, the image doesn’t scale down as the browser window shrinks, and on a smartphone, the header image does not display at all.

Also, what’s the best way to get text laid out on top of the header image? I’ve been using the standard wordpress header widget, but I find it hard to get the Text phrase over to the left side of the header area where I want it.

Here is the site I’m trying to improve with these things I’ve mentioned:

http://www.limitlesshealingwaves.com

Also, I should mention that I’m using the Elementor plugin a lot for basic page layout and editing. Maybe there is some conflict going on with it and GP products in regard to my issues I’ve mentioned with my header?

Any help would be greatly appreciated!

Thanks,
John

[Author]

Posts