How do I "Pad" an anchor so that the text is below the "floating" menu bar at the top?
We have our top Nav menu that floats as the page scrolls down, but when I use an Anchor for quick scroll to a section title, the text gets "lost" under the floating top menu.
I have tried adding "padding" lines between anchor and the text, but that doesn't always work. is there a better way to address this?
Thanks for your help
Paul T.
shared this idea
-
ID of an HTML element, by definition, must be unique: http://www.w3schools.com/tags/att_global_id.asp
Otherwise web browsers will treat it in unspecified way. -
Paul T.
commented
Thanks so much, that fixed it. So it seems like you can't have anchor names matching DIV id's or the render engine gets confused.
-
Hey Paul,
That was an interesting case. Please check your (copy) Page. I cant tell you what went wrong with your files exactly:). But I've fixed it by giving your anchors unique names (your div ID's had the same names as anchors). Everything is working right now as it should.
Check it out.
-
Paul T.
commented
Check out #3 and #4 bullet items at the top.
-
Paul T.
commented
It is still not working properly even doing that option.
See https://tccc.wildapricot.org/page-18261# -
I see only one solution here.
You will need to break this one gadget in to several content gadgets. And place anchors in other content gadgets between them. Set these anchor gadgets height to 0 and set up their margins the way I've described.
Do you think this can solve your problem?
If not, then can you please link of your site with page in question? So we could look at it to see the problem more clearly.
-
Paul T.
commented
So here is what how my layout is:
1 large content window:
--------------------------------Entry #1 (link to Anchor #1)
Entry #2
Entry #3Anchor#1
Dynamically generated file listAnchor #2
Dynamically generated file listetc..
Issue happens when I have some sections with a minimal # of files. Since this is all one content "gadget", plus being new to wild apricot, I am not really following what you are describing below too well.
-
Hi Paul.
Common solution for this is to place the anchor above your actual anchored section. You can place anchor right in the middle of your previous section paragraph or place it into invisible (0 height) gadget 40-60px above section you want it to jump to.
Another thing you can try - you can place invisible content gadget (0 height, no padding's) with an anchor and give it negative margin equal to menu height. This will move it up and it will be invisible for your visitors. This should work for you.
Third option is to use JS and catch links that lead to your anchor and make them scroll screen more then they originally should, but this is slight over-complication:).
Let me know if first two solutions worked for you.
P.S.
When working with negative margins and empty gadgets, do not forget to balance it with positive margin.
Say you want your anchor to be 100px higher then actual content. You will need to set top margin to -100px, and bottom margin to 100px and place it right at the top of your anchored section.
