Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

GeneratePress GenerateBlocks

Element – Header

  • abmmgb
    May 11, 2023 at 5:26 pm

    Hi,

    I used an element to create a header for a specific webpage.

    The header has two issues.

    The main is that above the header (primary navigation is disabled for this webpage) there is gap through which content is visibly passing by upon scrolling down.

    The second issue is that my header obscures the anchor link title (alphabet letter).

    I have tried merging header with content but it did not work.

    I would appreciate any suggestions.

  • Fernando
    May 11, 2023 at 5:42 pm

    Hi Ambmmgb,

    You would need to add this CSS for the first issue:

    body.page.page-id-16374 .gb-container.make-sticky {
    top: 0;
}

    For the second one, the anchor link is in the right position. When you have a Sticky Header, it will cover the anchor link by default. A usual solution for this would be to enable smooth scroll. Smooth scrolling tries to take into account the sticky header but since you have a custom Header for this page, I don’t think that would work.

    You would need JS for this. Example: https://generatepress.com/forums/topic/anchor-links-load-behind-sticky-header/#post-991786

  • abmmgb
    May 11, 2023 at 6:01 pm

    The css worked.

    Tried both smoothscroll as well as js but the issue remains.

    In any case, it looks better now 🙂

  • Fernando
    May 11, 2023 at 6:05 pm

    Yes, you’ll need a script for that. This would be out of our scope of support but you can try hooking the code recommended by the other customer through a Hook Element hooked to wp_footer and display it on the page.

    You’re welcome! 🙂

  • abmmgb
    May 13, 2023 at 6:52 pm

    I have found this CSS solution but need help adjusting it for my case if possible:

    https://generatepress.com/forums/topic/on-click-jump-to-location-not-working-on-first-load/

  • David
    May 14, 2023 at 6:38 am

    Hi there,

    each of your Accordions is in a parent Container.
    If you:

    1. Move the HTML anchor to that Container Block, instead of the accordion.
    2. add Padding top to that Container Block to the same height as your header.

    It will mean adding some white space between content but it solves the issue.

  • abmmgb
    May 14, 2023 at 7:01 am

    I had tried it previously on a couple of containers and it works however I was trying to avoid adding additional padding.

    Is there a way to have the padding for the purposes of sorting the anchor link, but not have the padding visible?

  • David
    May 14, 2023 at 12:03 pm

    Try offsetting whatever padding value you add with a negative top margin.

    eg.
    padding top = 100px
    margin-top = -100px

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