[Solved] Using an anchor tag with a navigation bar set as positon: fixed

[lkeeney]

I 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.

[chrisburton]

Link?

[lkeeney]

Unfortunately, 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.

[chrisburton]

Sounds like a z-index issue but I can’t be sure unless I see an example.

[lkeeney]

No, 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.

[__]

I 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.

[lkeeney]

In 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.

[Paulie_D]

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.

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?

[Paulie_D]

Here’s one I adapted

http://codepen.io/Paulie-D/pen/zvkpJ/

[lkeeney]

Thank you Paulie_D.

This is exactly what I was trying to do. It works great!

[Author]

Posts