Help needed – Page Title Displayed in Header “Squashed” against Main Menu

[Jeremy]

Hi there,

I’m having an issue with the page/post title displaying in the Header area.

Essentially, the issue is that that these titles are “squashing” or “crowding” for lack of a better term, the main menu which is also in the header.

Can someone assist with this?

The website is in “maintenance” mode but attached is a screenshot of the issue.

SCREENSHOT

FYI, I’m running the latest version of WordPress, Generate Press etc. and the few plugins I have are all up to date.

Thanks

Jeremy

[Leo]

Hi there,

Any chance you can disable the maintenance mode so I can see the issue live and inspect the code?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jeremy]

Leo,

Sure can. I have disabled it.

FYI, could it be because I am using a spacer “block” on my header (I am on the homepage anyway)?

I had to use the spacer “block” because otherwise, the text block covered the Main Menu

I look forward to hearing from you.

Jeremy

[David]

Hi there,

edit your Header Element, on the Site Header tab increase the Offset Site Header Height value. This value should be the height if the site header and navigation, which in your sites case is around 350px for desktop.

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jeremy]

David,

Thank you for your reply.

I’ll see what I can do but…I’m not a developer.

When I work with code it’s usually a cut/paste : )

As for the Header Element, is this something that requires implementation on EVERY post/page or do I simply construct ONE header that will work on all pages/posts?

FYI, I went to Elements and there are already two Header elements in there…one for Homepage, the other for posts/pages.

So…that answers my above question.

Next question, can I/should I simply edit the existing Header Elements as opposed to creating new ones from scratch?

P.S. I did try your suggestion…but this happened Screenshot

Thanks

Jeremy

[Leo]

As for the Header Element, is this something that requires implementation on EVERY post/page or do I simply construct ONE header that will work on all pages/posts?

The display rules should be what you are looking for:
https://docs.generatepress.com/article/header-element-overview/#display-rules

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jeremy]

Leo,

It looks like I get it to display fine using the existing Posts/Pages Header that was already in Elements.

I just had to add the offset as David mentioned.

HOWEVER, this didn’t work on the homepage.

It just creates a white “banner” across the top.

If I remove the “spacer” from the image on the HOME page, the menu ends up in the text.

I ASSUME/SUSPECT that I might have to add the image from the HOME page to the HEADER element BUT I don’t want to lose the white/olive text.

I hope this clarifies things?

Thanks

Jeremy

[Leo]

Sorry still a bit confused.

Doesn’t look like you need a page hero on the home page at all?

If so try adding the front page to the exclusion rule of the page hero.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jeremy]

Leo,

Thanks for getting back to me.

Ok…I’ll try and clarify.

When I installed Generatepress, I opted for one of the existing layouts/demo sites.

As such, there are already existing elements for the header.

One is for the Homepage header. The other is for the header on posts and pages.

1) The header is fixed on the posts and pages. I did what David recommended above which was to adjust the offset site header option.

2) The header on the homepage is NOT fixed.

It looks ok at the moment on a desktop because I have used a spacer module/block in the WordPress editor but leaves to much space on mobile. Here is a screenshot of the homepage with the “spacer” block Screenshot Spacer Block

If I remove the spacer “block” from the WordPress editor on the home page, the Menu and the words “LONG RANGE SHOOTING TRAINING, REVIEWS, E-COURSES, & COMMUNITY” get squashed/crowded together again. Here is a screenshot of the homepage with the spacer block removed Screenshot spacer block removed

I hope this clarifies my issue?

Thanks

Jeremy

[David]

In Appearance > Elements do you have more than one Header Element ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jeremy]

David,

Yes…there are two elements.

One is called Homepage header.

The other is called Posts/Pages header.

I basically just tweaked the Generatepress Java (I think that’s what it was called) demo site.

As such, those elements already existed.

As stated above, your suggestion of adding offset worked for the post/pages header but not the Homepage one.

Of note, the Homepage image is actually on the Homepage (not in the header element) and they “merge”.

Thanks

Jeremy

[Leo]

Have you solved this?

The home page looks good to me now:
https://postimg.cc/PpngH0Wj

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jeremy]

Leo,

Not solved on the Homepage.

Looks ok on desktop because I’ve used spacer block in the WordPress editor.

But…on mobile the spacer pushes the words below the fold and possibly does the same on tablet (I haven’t checked that yet).

If I could turn off the home page spacer block on mobile, that should solve the issue.

I hope this clarifies things further?

Thanks

Jeremy

[David]

For the Home Page as there is no Hero Content the offset doesn’t work.
Instead you will need to edit the Top Padding of that first Container Block you have on your front page. You can set different values for Desktop, Tablet and Mobile.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jeremy]

David,

The image and the text in front of it are both in the first container so won’t adding padding to the top container simply push the image and text further down the page leaving white space above it?

Is it possible to simply adjust the spacer block that I am currently using to be different px on different devices so it looks right on mobile etc.?

Thanks

Jeremy

[Author]

Posts