Fragment in html content goes behind the navbar, how to prevent this?

Question

I am using bootstrap 3. I am trying to do fragment identifier in html. My problem is when I click on a link(From Image: link1 or link2) the content goes up and placed behind the navbar. I want to show my content below the navbar. How can I do this? Please share with me if anyone have any idea about this. Bootply Link:http://www.bootply.com/FlMIBamLwj Before click on a link: After click on a link: My Codes are here: ``` CSS: @media (min-width: 979px) { body { padding-top: 60px; } } Html:

List1

Accepted Answer

This is an inherent problem with the hash fragment identifiers. It moves the page to the anchor point ignoring margins and paddings. This is even more annoying when using a fixed header like in your case. You could use this hack, which I have been using with `::before` pseudo-element. Your updated bootply: http://www.bootply.com/KViKzJkfX8 Remove `id` from your panels. Instead insert an anchor before every such panel with the `id`s so that they will act as your fragment identifiers. Like this: Instead of: ```

...

... ``` Do this: ```

...

... ``` The add `::before` pseudo-element to each of those anchors: ``` #l1::before, #l2::before, #l3::before { content: ""; display: block; height: 60px; margin: -60px 0 0 0; } ``` This will create a pseudo-element before the anchor with a height equal to your `body` padding (padding used to offset fixed header). In order to negate the space occupied by this pseudo-element, give it a negative top margin of the same height. This will make it apparently disappeared. Now, when you click your menu items the page will go the respective anchors, but because of the height of the `::before` pseudo-element before it, page will stop there. Hope this helps. In order to affix your left menu, you could make use of bootstrap `affix`. All you have to do is to add `affix` class to your `list-group`: ```

List1 List2 List3

``` And provide it a width equivalent to `col-md-4` (which you have given to the column) i.e. approx 30%. This is because `affix` will convert its position to `fixed` and hence take it out of the flow and hence the width will be auto relative to the content. Add this single style to your CSS: ``` .affix { width: 30%; } ``` That's it. Just two changes. Add class `affix` to your menu wrapper. Add style for `.affix` to fix a width. .

Fragment in html content goes behind the navbar, how to prevent this?

Solution

Problem