Support » Plugin: Sticky Header Effects for Elementor » 2 row header, one to show on scroll but not working

  • Resolved irishblake

    (@irishblake)


    Hi all.
    Site link above.

    The headers made of 2 Rows, top main row with image/tagline, and beneath in a full width row the actual navigation (Neither row has full Stretch on board).
    Ideally what I’m trying to do is have the top row disappear on scroll, leaving only the row with actual nav/cart/search items in it.
    I’ve tried a couple of different ways but -0 thought I’d ask before plowing into more efforts, to see if you have osme quick instructions on a simple way to have this effect~
    Thanks in Advance!
    Blake

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author Robert Wattner

    (@rwattner)

    Hi @irishblake

    Could you try these settings for me…

    Top section:
    Turn the plugin off, scrolling effects sticky off, no negative margins

    Bottom section:
    No stretch section, no negative margin, scrolling effects sticky:top, Plugin on with transparent header off, and a white initial background(style tab, not plugin setting).

    Let me know if this works for you

    Hi

    Top row::
    No margin in use; motion effects off controlled sticky off; stciky header effects off.

    Bottom row::
    As this is an inner section, no stretch capability; no margins in effect; Sticky Header effects plug On – with Transaprent off/white background thru page row.

    That does seem to have changed things. Bottom row stays on scroll, top goes – yay! – and now i think its just getting that menu’d area, after scroll, to stick to top of page on scroll itself.

    Plugin Author Robert Wattner

    (@rwattner)

    You need to make these 2 different sections, not inner and outer. That’s why the bottom section is spaced down from the top. Top section scrolls off the page and the bottom sticks to the top.

    I find it easiest to do this by duplicating the section and deleting what you don’t need out of each.

    Let me know how it goes

    Also, it looks like the menu element itself has a semi-transparent background

    Got You.

    That did it, all right~
    Thank You, Robert, this’ll help persuade for a full rebuild using Elementor.

    Thanks!~

    Hi Robert

    Follow up on this, sir.
    In the editor, when I scroll back up to top of page all is fine, navigation set stops at bottom.
    On live site, however, navigation goes to top of header and covers image.
    How do I solve that?
    As i say, in Elementor editing page all works fine and looks great.
    On site itself, covers image

    Plugin Author Robert Wattner

    (@rwattner)

    Are you using elementor theme builder? Did you build a header there and apply it to the homepage?
    It looks like “transparent header” should be turned off on the bottom section

    Hi

    Yes, it’s Elementor Pro for header/footer; Yes theme builder; header is applied sitewide; “transparent header” section/item of plugin is off.
    Advanced section – no setting changes/all at default – no offsets/no z index changes.
    Motion Effects – Sticky header only item ‘On’; ‘0’ offset and effects offset.
    Stiky Header Effects – Enables; scroll distance 140; Transparent header ‘off’;
    header background On, color white; bottom border On, 1 px width.
    No settings changed on responsive, no attributes and no custom css.

    Plugin Author Robert Wattner

    (@rwattner)

    Can you please email me @ rwattner@gmail.com so I can help you further? I’m very limited to help when posting on this forum. Thanks

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘2 row header, one to show on scroll but not working’ is closed to new replies.