Element covered by navbar with higher z-index

Question

I have a navbar with a z-index that is above/higher all other elements on a page, which means it is "ignored". Its height is not counted on the page.

Also, I am using Twitter Bootstrap as my website's foundation.

What happens when I try to redirect to an element with anchor tag. Example:

<a href="#idhere">Go to ID</a>

Part of the element I redirected to will get covered (covered element = navbar height) by the navbar since its height is not counted on the page.

I'm sure there is a fix to this with JS/jQuery but I would like to know if I can do it through just HTML & CSS.

Thank you. And please do ask for clarification if I did not address my question clear enough.

See this question : [offsetting an html anchor to adjust for fixed header](http://stackoverflow.com/questions/10732690/offsetting-an-html-anchor-to-adjust-for-fixed-header) — Michel, Apr 18 '14 at 13:49

score 0 · Accepted Answer · answered Apr 18 '14 at 13:46

0

I used to use a small trick (I think it still works), just do:

<div id="mydiv" class="section-target"></div>

And the CSS:

.section-target {
    margin-top: -40px ; // Change to your navbar height
    padding-top: 40px ;
}

answered Apr 18 '14 at 13:46

Holt

score 0 · Answer 2 · answered Apr 18 '14 at 13:53

Have a look at the docs here: Bootstrap - Navbar fixed top

It recommends you adjust the padding of the whole body, to compensate for the height of the nav-bar:

body { padding-top: 70px; }

You can also use the static top navbar, which does not require the extra padding: Bootstrap - Navbar static top

2 Answers2