CodePen

HTML

            
              <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
         
          <div class="nav-collapse collapse">
            <ul class="nav pull-right">
              <li class="active"><a class="home" href="#home">Home</a></li>
              <li><a class="work" href="#work">Work</a></li>
              <li><a class="about" href="#about">About</a></li>
              <li><a class="cont" href="#contact">Contact</a></li>
            </ul>
            
            <hr class="nav">
          </div><!--/.nav-collapse -->
        </div><!--/.nav-container -->
      </div><!--/.navbar-inner -->
</div><!--/.navbar -->



<div id="home">
	<h1>Home</h1>
</div>

<div id="work">
	<h2>Work</h2>
</div>

<div id="work">
	<h2>About</h2>
</div>

<div id="work">
	<h2>Contact</h2>
</div>
            
          
!

CSS

            
              .toppad {
	margin-top: 25px;
  border: 1px solid red;
}

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $(document).ready(function() {
    $('.nav li a').click(function() {
        $('h1, h2').appendTo('.toppad');
    });
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................