Content Partially Hidden Under Navbar

Question

Please run the following snippet:

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">
            <span class="glyphicon glyphicon-home"></span>
        </a>
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
            <div class="navbar-form">  
                <button>Sign in</button>
            </div>
        </ul>
    </div>
</div>
<div data-momentum="">
    <div class="page">
       <div class="list-group">
            <a class="list-group-item" href="#">First link</a>
            <a class="list-group-item" href="#">Second link</a>
            <a class="list-group-item" href="#">Third link</a>
            <a class="list-group-item" href="#">Last link</a>
        </div>
    </div> 
</div>

Notice that the first link is completely hidden under the navbar.

How could I edit the HTML/CSS so that the content is never hidden? (Even if the navbar's height increases)

as you have position:fixed so you have to use padding-top:50px in body and you are done. — Leo the lion, Apr 18 '16 at 13:08

score 1 · Answer 1 · answered Apr 18 '16 at 13:15

1

use this css .page{margin-top:50px}

answered Apr 18 '16 at 13:15

usman khan

119
5

score 0 · Answer 2 · answered Apr 18 '16 at 13:24

the reason for this is that your list-group element is starting at document margin, i mean, it's margin-top = 0px; so logically it's located under. ad in your css:

.list-group{
     margin-top: 50px;
     /*50px or the value of the height of navbar-header */
}

I noticed the height value can change, probably depending on device or display values... make sure to give it a proper value for each case...

Content Partially Hidden Under Navbar

2 Answers2