One-Page Navigation doesn't scroll correctly when Bar's height is set to Auto

I’m trying to create a header that will resize when content gets bumped down to the next line. I can do this fine if I set the Bar’s height to Auto (if I set a fixed value the content overflows or is cut, depending on the chosen setting). However, when I do this, whenever the browser jumps to a section (by clicking one of the One-page navigation links, or typing the section’s ID on the address bar) that changes the header’s status (sticky vs non sticky) the browser doesn’t take into account the height of the header.

Any suggestions?

This also happens when scrolling past the top hero section (1st bar on the header). Making the scrolling “jump”.

Hi Oriol,

Thanks for reaching out.
I have checked your website and found the issue you described. It seems that the Shrink Amount of the Bar is the reason behind your issue, I went ahead and set it to 0 from 1 and now the jump issue is resolved.

Screenshot-768-

Thanks

Hi Oriol,

Thanks for explaining the problem. You need to set a Fixed Height to the Sticky bar for the offset calculation and the Shrink Amount to 1.

Thanks

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.