[Support request] Help needed – Page Title Displayed in Header “Squashed” against Main Menu

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

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #1361255
    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

    #1361366
    Leo
    Staff
    Customer Support

    Hi there,

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

    #1361402
    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

    #1361625
    David
    Staff
    Customer Support

    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/

    #1362405
    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

    #1362413
    Leo
    Staff
    Customer Support

    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

    #1362439
    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

    #1362625
    Leo
    Staff
    Customer Support

    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.

    #1362652
    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

    #1363322
    David
    Staff
    Customer Support

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

    #1363458
    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

    #1363613
    Leo
    Staff
    Customer Support

    Have you solved this?

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

    #1363770
    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

    #1363987
    David
    Staff
    Customer Support

    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.

    #1366219
    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

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.