Shrinking Menu gets stuck to top

  • Resolved chihi108

    (@chihi108)


    8 months, 4 weeks ago

    Thanks for the plugin. I have tried to create sticky effect to the nav menu. It works fine and get sticky effect as the page is scrolled, but when the page is scrolled to top the menu remain stuck at the top and does not come down. Can you please advice what to go. Secondly, can the sticky effect with shrinking effect give a smooth shrinking effect? Any css? thanks for all your help.

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

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Contributor Robert Wattner

    (@rwattner)

    Hi,

    I see that the CSS class “she-header” is immediately applied to the header. That class should be toggled once the scroll position has been reached. Try setting the scroll distance a little past the header.

    If the bottom blue header section is set to sticky > top, then it should be a smooth transition.

    Let me know if that works for you.

    Thread Starter chihi108

    (@chihi108)

    Thanks for your advice. scroll distance set to 100px and it solved the menu which was getting stuck at the top, so now working better.

    However I could not find “If the bottom blue header section is set to sticky > top, then it should be a smooth transition.” as my Elementor is not PRO so I cant see that setting, and its not seen in your plugin setting either. Are you referring in case it was Elementor PRO?

    Please if you can have a look again and advice if the stickyness can be more like ease time? Regards

    Plugin Contributor Robert Wattner

    (@rwattner)

    Yes, that setting is an Elementor Pro setting. It looks like the scroll distance for desktop should be 161.188px, tablet is 154.848px, and mobile is 162.031px. That should stick the blue section as soon as it hits the top of the page. Hopefully that helps. I just used the devtools to add up the total height of the top sections.

    Let me know if that works.

    Thread Starter chihi108

    (@chihi108)

    Thanks that solved the issue. Can you suggest anything to get a smooth shrinking effect for the Navigation row which is below the row which has the logo, that the Navigation row when gets sticky gets a smooth shrinking effect ? Out of the 3 rows the bottom row has sticky effect and has Navigation menu (middle row has the logo and is not sticky and I would like to keep it this way). Thanks a lot.

    Plugin Contributor Robert Wattner

    (@rwattner)

    I would use the min height setting for all 3 containers that way you don’t need padding and know the exact height of each.

    It looks like the top can be 30px, middle 180px, and bottom, 60px.

    Then you know the scroll distance on my plugin needs to be 30 + 180 = 210px.

    The bottom header is shrinking smoothly. I can see the height transition. It just looks like it’s not shrinking very much. You could set the bottom section to something like 70 or 80px. Then you can shrink it to be smaller once it’s sticky.

    Remember, padding can’t shrink, use min height instead.

    I hope this helps.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Shrinking Menu gets stuck to top’ is closed to new replies.