Bootstrap affix on navbar, property is always on (class always active)

Question

I am trying to implement Bootstrap's affixed navbar, like in this example.

Here is a pen of what I have. It seems that the 'affix' class is always activated on the navbar element. That is, when I do

.affix {
   top: 0;
}

The navbar automatically goes to the top on page load, when what I want it to do is be under the name and title. Any ideas on why this could be happening?

EDIT: Fixed the example link

Answer 1

Something like this?

https://codepen.io/anon/pen/mRrBNK

I've just moved the title and sub text and added a class within

<nav class="navbar navbar-default navbar-custom" data-spy="affix" data-offset top="197">      
<div class="navbrand">
  <h1> John Smith</h1></div>
  <h4> Developer and Engineer </h4>