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

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:
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</nav>
<div class="container">
<div class="row clearfix">
<div class="col-md-4 column">
<div class="list-group">
List1
List2
List3
</div>
</div>
<div class="col-md-8 column">
<div class="panel panel-default" id="l1">
<div class="panel-heading">
<h3 class="panel-title">
List 1 title
</h3>
</div>
<div class="panel-body">
list1 content
</div>
<div class="panel-footer">
list1 footer
</div>
</div>
<div class="panel panel-default" id="l2">
<div class="panel-heading">
<h3 class="panel-title">
List 2
</h3>
</div>
<div class="panel-body">
List 2 content
</div>
<div class="panel-footer">
List 2 footer
</div>
</div>
<div class="panel panel-default" id="l3">
<div class="panel-heading">
<h3 class="panel-title">
list3 title
</h3>
</div>
<div class="panel-body">
list3 content
</div>
<div class="panel-footer">
list3 footer
</div>
</div>
</div>
</div>
</div>
Bootply Link: http://www.bootply.com/FlMIBamLwj#

Answer 1

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 ids so that they will act as your fragment identifiers. Like this:
Instead of:
<div class="panel panel-default" id="l1">
...
<div class="panel panel-default" id="l2">
...
Do this:
<a id="l1"></a>
<div class="panel panel-default">
...
<a id="l2"></a>
<div class="panel panel-default">
...
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:
<div class="col-md-4 column">
<div class="list-group affix" > <!-- Add affix class here -->
List1
List2
List3
</div>
</div>
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.
.

Answer 2

Thats default functionality of an anchor tag. If you are navigating on the same page, the browser will take you to that tag.
If you want only the content section to move, you'll have to separate its content and height from the rest of the page. That can be done by applying a height and an overflow property to it:
#scrollableDiv {
height:100px;
overflow:auto;
}
And add the id to the div that you want scrolling
<div id="scrollableDiv" class="col-md-8 column">
<div class="panel panel-default" id="l1">
...
Working version can be seen here: http://www.bootply.com/JaIlKXHycj