proper setting for navbar-fixed-top in bootstrap 3

Question

I found the menu bar will overwrite some content of first line. When I click the dropdown 'first', it will locate to the first list item, but it was overwritten by menu bar. I've try apply one solution Posted in jsbin, but failed.

original html is here.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <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>
      <a class="navbar-brand" href="#">Bootstrap theme</a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#first">first</a></li>
            <li><a href="#end">end</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</div>
<ul>
  <li id="first">first</li>
  <li>a2</li><li>a3</li><li>a4</li><li>a5</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li>
  <li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li>
  <li id="end">end</li>
</ul>  

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>

SOLUTION demo (as answer)

What this is called is: anchor links being covered by sticky or fixed position navbar. I used this: http://stackoverflow.com/questions/10732690/offsetting-an-html-anchor-to-adjust-for-fixed-header/20320919#20320919 change to the height of navbar, not the 125 in that code. — Christina, Sep 05 '14 at 18:55
Also, look at the demo on GetBootstrap.com the body has a top padding equal to the height of the fixed navbar. You must use that CSS and the jQuery to not cover up your ids — Christina, Sep 05 '14 at 19:00

Suganth G · Accepted Answer · 2014-09-05T09:15:18.960

0

Try this:

DEMO

Use padding top in the <li>

 <li id="first" style="padding-top: 50px;">first</li>

edited Sep 05 '14 at 09:15

answered Sep 05 '14 at 09:06

Suganth G

5,136
3
25
44

Is the body padding-top in document should remove? – Daniel YC Lin Sep 07 '14 at 02:22
This method will cause extra space before every anchor, for example: http://dlintw.github.io/gobyexample – Daniel YC Lin Sep 07 '14 at 13:28

score 0 · Answer 2 · answered Sep 05 '14 at 20:48

Protip: Read the docs!

Body padding required

The fixed navbar will overlay your other content, unless you add padding to the top of the <body>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.
body { padding-top: 70px; }
Make sure to include this after the core Bootstrap CSS.

proper setting for navbar-fixed-top in bootstrap 3

2 Answers2

DEMO

Body padding required