- This topic is empty.
-
AuthorPosts
-
September 16, 2014 at 8:25 pm #183326
lkeeney
ParticipantI have a web page with a top horizontal navigation bar with a fixed position so the navigation bar will always be visible at the top of the page when scrolling.
I have the navigation links set up with anchor tags to take the viewer to various places in the body of the page.
The problem is; the anchor tag displays the selected content behind the navigation bar rather than beneath it.
How do I resolve this issue? I have tried every trick I can think of, and noting works.
September 16, 2014 at 8:29 pm #183327chrisburton
ParticipantLink?
September 16, 2014 at 8:34 pm #183331lkeeney
ParticipantUnfortunately, I can’t show this page. My client had both my wife and I sign non-disclosure documents before they gave me the job to design their website.
I could probably design another page with the same problem but that does not show any of my clients content. However, I was hoping my description would be enough to explain the problem.
It is just as though the navigation bar is not taking up any space on the page, and the anchor tag displays the content as though the navigation bar was not there.
This is important enough that I will design a new page to show this problem if no one can understand my description.
September 16, 2014 at 8:37 pm #183332chrisburton
ParticipantSounds like a z-index issue but I can’t be sure unless I see an example.
September 16, 2014 at 8:45 pm #183334lkeeney
ParticipantNo, it is not a z-index issue as the navigation bar is on top of the content. If the z-index was reversed, the content would be on top of the navigation bar.
I want the content to appear just below (lower on the page) the navigation bar.
If I remove the navigation bar from the page, the anchor tag works like it is supposed to. The anchor tag puts the content at the top of the page, but I want it to place the text about 65 pixels from the top of the page because the navigation bar is 55 pixels high.
September 16, 2014 at 8:46 pm #183335__
ParticipantI could probably design another page with the same problem but that does not show any of my clients content.
Absolutely. Doing that is called a reduced test case. Sites like codepen are perfect for it.
No, it is not a z-index issue …
It really might be. There are a lot of subtleties to
z-index
.September 16, 2014 at 8:58 pm #183336lkeeney
ParticipantIn the morning i will put together a page which will show this problem. Seeing I am not familiar with codepen, I will put the demonstration page on the back end of my personal website.
If is is not satisfactory, I will try to put the code into codepen.
September 17, 2014 at 2:06 am #183345Paulie_D
MemberThe anchor tag puts the content at the top of the page, but I want it to place the text about 65 pixels from the top of the page because the navigation bar is 55 pixels high.
This sounds like an offset issue.
The linked item will always come to the top of the page and so be covered by the fixed position navbar.
So you need to find some way of adding the offset (65px I think you said) to the position of the anchor.
Just adding padding-top of 65px to the anchors should do it.
http://stackoverflow.com/questions/4086107/html-positionfixed-page-header-and-in-page-anchors..or there is the pseudo-element method
http://nicolasgallagher.com/jump-links-and-viewport-positioning/
I’m assuming these are just normal anchor links…no JS/JQ involved?
September 17, 2014 at 7:21 am #183380Paulie_D
MemberHere’s one I adapted
September 17, 2014 at 9:40 am #183391lkeeney
ParticipantThank you Paulie_D.
This is exactly what I was trying to do. It works great!
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.