Tagged: 

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • July 12, 2022 at 7:11 pm #1358114
    smudgedesign

    Hi,

    Ive got a top a transparent header that appears on scroll down
    and set to be sticky.

    My client would like the header to hide again when it reaches my footer
    (which is a custom page, with a 100% height colour element)

    So is it possible to hide the header when the scroll reaches a certain ID
    or even for it to remain sticky but then stick to a certain point.

    Like the reverse of the full width sub menu which sticks when you scroll to it.!

    July 12, 2022 at 7:37 pm #1358119
    smudgedesign

    I’ve also tried to add a custom ID to the footer colour section

    and then added some custom css

    #mmfooter{
    z-index:600!important;
    }

    July 12, 2022 at 7:41 pm #1358121
    Mike

    Hey smudgedesign,
    Thanks for your question, I recently worked on a solution for something similar to this, please review this thread
    basically, you add a custom class: waypoint-trigger to an element on the page and when it is in view the script will hide the header.
    if you find you need some help setting it up please include an admin login in the Private Content area.

    Best regards,
    Mike

    July 13, 2022 at 10:34 am #1358180
    smudgedesign

    Mike you’re a legend.
    Exactly what i needed thank you.

    However it currently just works when i have the header invisible until the user scrolls.
    On another page / post where the header is visible and sticky it doesn’t seem to hide
    when it hits the trigger point.

    Would you know of a workaround?

    • This reply was modified 2 years, 4 months ago by smudgedesign.
    July 13, 2022 at 6:40 pm #1358240
    Mike

    Hi,
    Thank you for the link to your pages, but I’m not sure why this is occurring, I linked to my demo page below which is currently “header visible and sticky”, I also tested different header settings and it worked for my demo each time.
    Are you manually managing Builder Elements in Enfold Theme Options ▸ Performance ▸ Disable Template Builder Elements?
    Please include an admin login in the Private Content area so we can investigate, are there any other pages where this is not working?

    Best regards,
    Mike

    July 14, 2022 at 12:00 pm #1358312
    smudgedesign

    Hi Mike

    It seems to only work for me with header hidden until scrolling is set.
    It’d be great if you could investigate further, i’ve provided login details below

    note the javascript is added to the plugin ‘snippets’
    rather than in the functions.php file as I find this useful.

    Kindest
    Mick

    July 14, 2022 at 12:24 pm #1358318
    Mike

    Hi,
    Thanks for the login, but it is not admin so I can see any of the theme settings or make any changes, please elevate to admin.

    Best regards,
    Mike

    July 14, 2022 at 12:34 pm #1358321
    smudgedesign

    Sorry mike, my bad, just updated you to an admin now

    July 14, 2022 at 5:35 pm #1358356
    smudgedesign

    Hi MIke

    I figured out why.
    I had the offset too low at 10% so it wasn’t kicking in.
    So when i changed to 30% it worked.

    Kindest
    Mick

    July 14, 2022 at 8:21 pm #1358377
    Mike

    Hi,
    Glad to hear that you have this sorted out, and thanks for sharing your solution, unless there is anything else we can help with on this issue, shall we close this then?

    Best regards,
    Mike

    July 15, 2022 at 10:16 am #1358439
    smudgedesign

    Yes you can close this ticket. Thanks again.

    July 15, 2022 at 1:16 pm #1358485
    Mike

    Hi,
    Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Sticky header – possible to stop at a certain point’ is closed to new replies.