[Resolved] Not able to get site header configured and doesn't format for mobile/tablet

[Donald]

On my existing site (trophybonesoutfitters.com for reference) I have a much deeper header and I’m able to place the site logo, header title and header tagline where I want them. (using a different theme) Also my existing site logo and site header re-formats so they display for different size screens on the existing site. Is it possible to maintain the same look with the GenerateTheme or use a template in the site library. I am redesigning on a staging site before I move to a new hosting company (SiteGround) and don’t mind starting from scratch.(for example the Catalyst by Mike Oliver).

FYI: the URL below is my staging site where I’m configuring the GenerateTheme theme.

[David]

Hi there,

the easiest way would be to create a Header Element:

https://docs.generatepress.com/article/header-element-overview/

Here’s some examples of them:

https://docs.generatepress.com/article/page-hero-examples/#example-2

This means your Site Header in the Customizer would just contain the logo and the navigation. The image and the text would come from the Header Element.

Let me know if you need more info.

[Donald]

David really appreciate the help.
The Header Image came out great! Now if I can get the logo to appear in the top left corner and the site Title and Tagline on the bottom of the header I’d be golden.

Thanks again!!

[Leo]

Just to confirm, you want the logo to move up (red arrow) and the site title and tagline at the bottom of the header (green arrow) like this?
https://www.screencast.com/t/JQ9vdGYmSs

What about the navigation?

[Donald]

Whoops, meant to respond here rather than just reply.
Yes, that is correct. I have managed to get the site logo up to the position it needs to be, but if I unhide the site title and the tagline it makes a mess of it. So, just to be clear I would like the logo positioned where it is, but have the site title and tagline at the base of the header, but visible of course on the page. The other issue I have yet to master is auto reformatting of the page for various scree sizes.

Thanks Leo!!

[Donald]

Sorry Leo,
The navigation is fine. I like it at the top.

[Leo]

How are you adding the site title currently?

Can you add them as the page hero content?

Then we should be able to align them to the bottom with some CSS.

Let me know 🙂

[Donald]

Hi Leo,
I’ve tried several things, but currently I did the header image with a hero element. (I think its called). Then I started working on a hook element and I have something close, but the site title and the tagline are miles apart. I think I can work on the font once I get those two lined up. Fro reference you can take a look at my production site (trophybonesoutfitters.com) which is what would be nice to end up with. My staging site is 4jg.b78.myftpupload.com which has the new GeneratePress template. I really appreciate your time assistance on this. I’m a retired network engineer and know very little about webmastering. Just trying to get by on a shoestring budget.
This is the code I’ve come up with in the hook element. I would like to get the top line down just over the bottom line of text. As in the prod site.

<p style=”font-family: times, serif;
font-size:60pt;
color:White”>Eastern Kentucky Hunting Outfitter</p><p style=”font-family: times, serif;
font-size:48pt;
color:white”>Whitetail Deer, Turkey and Coyote Hunts</p>

[Donald]

BTW: I’ve been trying to leave a 5 star review, but it takes me to the wordpress site and I search around for the review section, but haven’t come across it. I know I’m next to helpless.

[Leo]

Instead of using hooks element, can you add this as the page hero content for the home page page hero?

<h1 class="main-title" itemprop="headline">Eastern Kentucky Hunting Outfitter</h1>
<p class="site-description" itemprop="description">Whitetail Deer, Turkey and Coyote Hunts</p>

Then set the horizontal alignment to center:
https://docs.generatepress.com/article/how-to-create-a-page-hero/#step-5-position-the-content

Let me know when this is done. We should be close to replicate your previous home page 🙂

[Donald]

Okay so, I pasted the code in the the Hero Page element then went to the customizer > Layout > Header Alignment and changed it Centered. That changed things around a bit.

[Donald]

Okay, I got ya now. Went back and changed the customizer, went to the element and changed horizontal alignment to center. looks better.

[Leo]

Yup we are getting there.

Now just increase the top padding of that page hero and the site title and tagline should move down:
https://docs.generatepress.com/article/how-to-create-a-page-hero/#step-5-position-the-content
https://docs.generatepress.com/article/header-element-overview/#padding

Let me know 🙂

[Donald]

Great!! You made this easy. I was working at it way to hard. One more question. How do I change the font size of the text? Oh and I lied. How do we get the pages to auto format for various screen sizes?

[Donald]

Okay, the text is to some degree. The logo not so much. Wish I could get it to display a little bigger on tablet and cells.

[Author]

Posts