We have a site using a sticky header menu. When we have links to sections they are but off by the header since it is not taking into the header height.
We have updated to the latest version of Pro and cleared all cache. Any thoughts?
Hey @designerken,
Thanks for writing in! Instead of adding the ID like “maintenance”, “asset”, “design”, “capital” to the Row element, you may need to separate them in an Section element.
Section
Row - Maintenance
Section
Row - Asset
Section
Row - Design
Section
Row - Capital
Kindly let us know how it goes.
“you may need to separate them in an Section element.”
The IDs on the pricing page are added to a Div with global margins. So same concept as a row. So that does not work.
On the home page the second section (How it works) is set with the ID. (the button is on the first section) and that scrolls past it as well.
So 2 different implementations of the ID, one on the section itself and another on a nested DIV in the a section. Both do not work and take into account the header height offset.
Please investigate more.
Hello @designerken,
You Sticky Menu Bar has a height of 120 pixels. The ID must be in the Section. Putting it in a DIV or Row element inside the Section may not take into account the height of the header. I would recommend that you check out the example URL in the secure below. There is a 32 pixel difference because of the WP Admin bar. The space should adjust when you are logged out.
Hope this helps.
I see so the “scroll to” only works if the section is given the ID?
Can you then see why on the home page the “How it works” section the padding is covered by the header, and should show more space.
I also did as you said in the “pricing” page by creating sections. But it still does not take into account the header height.
Hey @designerken,
I have duplicated your page and in each of the Section, I added a top and bottom padding of 65 pixels. Kindly check out the demo link the secure note below.
Thanks.
Yes, I see that. But in our case we are using a variable to set the padding. Is that our issue? or is something else happening? Our 2 pages do not work with the offset.
Hey @designerken,
Your Header > Bar 1 Height is set to auto so the sticky header spacer is collapsed in that case. Please try setting a fixed header height in order to fix the offset. The sticky header spacer is what offsets the content and it gets its height from the Bar Height setting.
We have already tried that and it had no effect. Leaving it set to auto is what we require.
Hey @designerken,
I’ve tested further and it looks like an old bug has returned. The offset doesn’t work if you reload the page with #. The offset will only work if you click the button with #.
I’ll post this in our tracker so this case will be queued for investigation and fixing.
Please stay tuned.
I am not quite following your assessment.
We are linking to the IDs from a button, and it will not work. This isn’t a reload issue? That is why I first reported the issue.
I rebuilt the header and gave it a fixed height of 120px. Right now it seems to be working. But I don’t see what bug you’re referring to. Also it should be able to account for AUTO height on the bar container.
Hey @designerken,
In previous versions, visiting domain.com/#link would smooth scroll to the section with offset. That is what I mean by reloading or simply loading a URL with fragment identifier (#).
The reason why I think this is a bug is because I replicated the issue in my site.
Please stay tuned for updates.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.