How to get Bootstrap Scrollspy working with active li class

Profile picture for Kayla Cohn
Kayla Cohn

I am having trouble getting the bootstrap scrollspy to work on my site. I have tried attributes and js and neither are working. I have where if i click the link in my navbar it jumps to the section of the page but the scrollspy will not work.

HTMl

<body> 
<!-- HEADER
============================================== -->
<header class="site-header" role="banner">


	<!-- NAVBAR
	============================================== -->
	<div class="navbar-wrapper">
		
		<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">

			<div class="container">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle" 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="/"<img src="assets/img/cohnhead-productions3.jpg" alt="CohnHead Productions Logo"></a>
				</div><!-- navbar-header -->
				<div class="navbar-collapse collapse" id="target-nav">
					<ul class="nav navbar-nav navbar-right nav nav-pills">
						<li class="active"><a href="#home-nav">Home</a></li>
						<li><a href="#about-nav">About</a></li>
						<li><a href="#services-nav">Services</a></li>
						<li><a href="#players-nav">Players</a></li>
						<li><a href="#hire us-nav">Hire Us</a></li>
						<li><a href="#affiliates-nav">Affiliates</a></li>
					</ul>
				</div><!-- navbar-collapse -->
			</div><!-- container -->
			
		</div><!-- navbar -->

	</div><!-- navbar-wrapper -->
	
</header>


	
<!-- HERO	
============================================== -->	
<section id="hero" data-type="background" data-speed="5">
	<article>
		<a id="home-nav" name="home-nav"></a>
		<div class="container-fluid clearfix">
			<div class="row">
				
				<div class="col-md-12 bgimage">
					<h1>Welcome to CohnHead Productions</h1>
					<p class="lead">We <strong>know</strong> what the next level <strong>requires</strong>!</p>
					<div class="text-center">
						<a href="#services" class="btn btn-warning btn-lg" role="button">Learn more</a>
					</div>
					<div class="bgimage-inside">
						
					</div><!-- bg image -->
					<i class="fa fa-arrow-circle-o-down fa-4x"></i>
				</div><!-- col -->

			</div><!-- row -->
		</div><!-- container -->
	</article>
</section><!-- hero -->

<!-- ABOUT SECTION
============================================== -->
<section id="about">
	<a id="about-nav" name="about-nav"></a>
	<div class="container clearfix">
		<div class="row">
			<h2 class="text-center">About</h2>
			<div class="seperator">
				<span></span>
			</div>
			<h4 class="subtitle">Isaiah Cohn, Owner of CohnHead Productions</h4>
			<div class="col-md-4">
				<img class="img-responsive"src="assets/img/Isaiah.jpg" alt="Isaiah Cohn, Owner of CohnHead Productions">
			</div><!-- col -->
				
			<div class="col-md-8">
				<p class="paragraph-text"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt odit delectus excepturi, unde aperiam explicabo, ducimus harum, temporibus eaque dolorum blanditiis, cumque voluptates! Ipsa, non. Quam, eos fuga assumenda quis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, id possimus sit distinctio minima expedita vero aliquid. Aliquid officia reprehenderit earum, et enim odio, expedita fuga dolorem, modi aliquam molestiae.</span><br>

				<span>Veritatis mollitia, tenetur saepe totam nam accusantium! Autem dignissimos cupiditate nihil libero minus magni quod impedit dicta repellendus. Ipsam quos deserunt illum pariatur delectus officiis totam optio porro voluptatum, est? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus harum, qui totam eligendi quod doloremque iure sint, eveniet quis ut nostrum! Quasi consequuntur nemo doloremque laboriosam mollitia tenetur, earum! Laborum.</span><br>

				<span>Error laboriosam officiis quae quaerat enim hic voluptas architecto sequi, aperiam eaque reiciendis, natus voluptate officia ipsum culpa veritatis pariatur. Laudantium at consectetur, provident molestias obcaecati iste inventore quasi cumque? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus porro, quos fugiat, inventore repudiandae ullam unde sed quis a soluta earum doloremque quas. Illo qui, dolorum. Vel eos, similique aspernatur.</span> </p>
			</div><!-- col -->
		</div><!-- row -->
	</div><!-- container -->
</section>

	
<!-- SERVICES
============================================== -->
<section id="services">
	<a id="services-nav" name="services-nav"></a>
	<div class="container clearfix">
		<div class="row">
			<h2 class="text-center">Services</h2>
			<div class="seperator">
				<span></span>
			</div><!-- seperator -->
			<h4 class="subtitle">We specialize in creating Professional Highlight Tapes.</h4>
			<div class="col-sm-4">
				<i class="fa fa-film fa-3x">
					<p>Video</p>
				</i>
				<p class="paragraph-text">
					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab maxime accusantium, vel consectetur alias dolorem. Nulla numquam excepturi iste temporibus. Beatae, nostrum sapiente quae voluptas at error eaque a modi! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, et repellendus quia delectus saepe asperiores eum, quas perferendis, provident laudantium ut tempore aliquam. Nobis itaque officia, blanditiis. Totam, qui iure. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora quia eligendi, ad quo et nihil maxime minima eius! Quae nihil unde voluptate quod adipisci aliquam magni quam illum deserunt minus.
				</p>
			</div><!-- col -->

			<div class="col-sm-4">
				<i class="fa fa-mobile fa-3x">
					<p>Contact</p>
				</i>
				<p class="paragraph-text">
					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab maxime accusantium, vel consectetur alias dolorem. Nulla numquam excepturi iste temporibus. Beatae, nostrum sapiente quae voluptas at error eaque a modi! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, et repellendus quia delectus saepe asperiores eum, quas perferendis, provident laudantium ut tempore aliquam. Nobis itaque officia, blanditiis. Totam, qui iure. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora quia eligendi, ad quo et nihil maxime minima eius! Quae nihil unde voluptate quod adipisci aliquam magni quam illum deserunt minus.
				</p>
			</div><!-- col -->

			<div class="col-sm-4">
				<i class="fa fa-user fa-3x">
					<p>Sign</p>
				</i>
				<p class="paragraph-text">
					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab maxime accusantium, vel consectetur alias dolorem. Nulla numquam excepturi iste temporibus. Beatae, nostrum sapiente quae voluptas at error eaque a modi! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, et repellendus quia delectus saepe asperiores eum, quas perferendis, provident laudantium ut tempore aliquam. Nobis itaque officia, blanditiis. Totam, qui iure. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora quia eligendi, ad quo et nihil maxime minima eius! Quae nihil unde voluptate quod adipisci aliquam magni quam illum deserunt minus.
				</p>
			</div><!-- col -->
		</div><!-- row -->
	</div><!-- container -->
</section>


<!-- PLAYERS
============================================== -->
<section id="players">
	<a id="players-nav" name="players-nav"></a>
	<div class="container clearfix">
		<div class="row">
			<h2 class="text-center">Players</h2>
			<div class="seperator">
				<span></span>
			</div><!-- seperator -->
			<h4 class="subtitle">Take a look at some of the players we have helped.</h4>

			<div class="col-md-4">
				<h5 class="players">Chinedu Arinze</h5>
				<img class="player-img" src="assets/img/chinedu.jpg" alt="Chinedu Arinze">
				<p class="paragraph-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quod facilis eaque repellat mollitia pariatur saepe unde cupiditate consequatur minima eligendi, vel omnis, quam voluptatem nesciunt rem, ut placeat eius. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, magni voluptates minima! Voluptas quasi dolores, repellendus asperiores rerum earum omnis vel dicta, cum iure culpa expedita. Ad accusantium reprehenderit alias!</p>

				<iframe width="350" height="300" src="https://www.youtube.com/embed/OQzXulLUurI" frameborder="0" allowfullscreen>
				</iframe>
			</div><!-- col -->

			<div class="col-md-4">
				<h5 class="players">Jason King</h5>
				<img class="player-img jason" src="assets/img/jason.jpg" alt="Jason King">
				<p class="paragraph-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quod facilis eaque repellat mollitia pariatur saepe unde cupiditate consequatur minima eligendi, vel omnis, quam voluptatem nesciunt rem, ut placeat eius. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, magni voluptates minima! Voluptas quasi dolores, repellendus asperiores rerum earum omnis vel dicta, cum iure culpa expedita. Ad accusantium reprehenderit alias!</p>

				<iframe width="350" height="300" src="https://www.youtube.com/embed/1t0snoFXvNI" frameborder="0" allowfullscreen>
				</iframe>
			</div><!-- col -->

			<div class="col-md-4">
				<h5 class="players">Juergen Williams</h5>
				<img class="player-img" src="assets/img/juergen.jpg" alt="Juergen Williams">
				<p class="paragraph-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quod facilis eaque repellat mollitia pariatur saepe unde cupiditate consequatur minima eligendi, vel omnis, quam voluptatem nesciunt rem, ut placeat eius. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, magni voluptates minima! Voluptas quasi dolores, repellendus asperiores rerum earum omnis vel dicta, cum iure culpa expedita. Ad accusantium reprehenderit alias!</p>

				<iframe width="350" height="300" src="https://www.youtube.com/embed/7AhAiJkVwSg" frameborder="0" allowfullscreen>
				</iframe>
			</div><!-- col -->

		</div><!-- row -->
	</div><!-- container -->
</section>


<!-- HIRE US
============================================== -->
<section id="hire-us">
	<div class="container">
		<div class="row">
			<h2 class="text-center">Hire Us</h2>
			<div class="seperator">
				<span></span>
			</div><!-- seperator -->
			<h4 class="subtitle">We'd love to work with you, please use this form to contact us.</h4>
			<div class="col-sm-6 col-centered">
				<form role="form clearfix">
				  <div class="form-group">
				    <label for="contact-email" class="sr-only">Email address</label>
				    <input type="email" class="form-control input-lg" id="contact-email" placeholder="Email">
				  </div>
				  <div class="form-group">
				    <label for="contact-password" class="sr-only">Password</label>
				    <input type="password" class="form-control input-lg" id="contact-password" placeholder="Password">
				  </div>
				  <div class="form-group">
				  	<label for="contact-words" class="sr-only">Message</label>
				  	<textarea name="" id="contact-words" cols="30" rows="10" class="form-control input-lg"></textarea>
				  </div>
				  <input type="submit" class="btn btn-warning btn-lg pull-right">
				</form>
			</div><!-- col -->
		</div><!-- row -->
	</div><!-- container -->
</section>


<!-- AFFILIATES
============================================== -->
<section>
	
</section>


<!-- FOOTER
============================================== -->
<section>

</section>


<!-- BOOTSRAP CORE JAVASCRIPT
Placed at the end of the document so the pages load faster!
============================================== -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<script src="assets/js/jquery-2.1.4.min.js"></script>

<script src="assets/js/bootstrap.js"></script>

<script src="assets/js/custom.js"></script>
</body> </html>

Javascript

$('body').scrollspy({ target: '#target-nav' });

Couple Issues here:

  1. According to the docs:

Resolvable ID targets required
Navbar links must have resolvable id targets. For example, a <a href="#home">home</a> must correspond to something in the DOM like <div id="home"></div>.

So in order for bootstrap to automatically add the class .active, each anchor from your navbar has to resolve to an ID within your document:

<li class="active"><a href="#home-nav">Home</a></li>
<li><a href="#about-nav">About</a></li>
<li><a href="#services-nav">Services</a></li>
<li><a href="#players-nav">Players</a></li>
<li><a href="#hire us-nav">Hire Us</a></li>
<li><a href="#affiliates-nav">Affiliates</a></li>

Notice this is a problem for hire us-nav which isn't a valid id and players-nav which doesn't exist.

  1. According to the docs:

Non-:visible target elements ignored
Target elements that are not :visible according to jQuery will be ignored and their corresponding nav items will never be highlighted.

I suspect what was actually happening in your case is that your empty anchor elements that did have the ID in them, were invisible because they were empty.

To test this - open up the console (if you're testing on stack snippets, make sure to choose the frame that the snippets load into) and then run the following code:

$("#about-nav").is(":visible")

If it returns false, then Bootstrap wasn't using it:

Screenshot of Console

Instead of putting the ID's in empty anchor tags below:

<a id="about-nav" name="about-nav"></a>

You should get rid of the empty anchor elements and place them in your section like this:

<section id="about-nav">

Here's a working demo using Stack Snippets

<!-- begin snippet: js hide: false --> <!-- language: lang-js --> 
$(function(){
  $('body').scrollspy({ target: '#navbar-example' })
});
<!-- language: lang-html --> 
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>


<!-- HEADER
============================================== -->
<header class="site-header" role="banner">


    <!-- NAVBAR
    ============================================== -->
    <div class="navbar-wrapper">

        <div class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="navbar-example">

            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" 
                            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="/">
                      <img src="assets/img/cohnhead-productions3.jpg" alt="CohnHead Productions Logo"/>
                  </a>
                </div><!-- navbar-header -->
                <div class="navbar-collapse collapse" id="target-nav">
                    <ul class="nav navbar-nav navbar-right nav nav-pills">
                        <li class="active"><a href="#home-nav">Home</a></li>
                        <li><a href="#about-nav">About</a></li>
                        <li><a href="#services-nav">Services</a></li>
                        <li><a href="#players-nav">Players</a></li>
                        <li><a href="#hire-us-nav">Hire Us</a></li>
                        <li><a href="#affiliates-nav">Affiliates</a></li>
                    </ul>
                </div><!-- navbar-collapse -->
            </div><!-- container -->

        </div><!-- navbar -->

    </div><!-- navbar-wrapper -->

</header>



<!-- HERO   
============================================== -->  
<section id="home-nav" data-type="background" data-speed="5">
    <article>
        <div class="container-fluid clearfix">
            <div class="row">

                <div class="col-md-12 bgimage">
                    <h1>Welcome to CohnHead Productions</h1>
                    <p class="lead">
                      We <strong>know</strong> what the next level <strong>requires</strong>!
                    </p>
                    <div class="text-center">
                        <a href="#services" class="btn btn-warning btn-lg" role="button">
                          Learn more
                      </a>
                    </div>
                    <div class="bgimage-inside">

                    </div><!-- bg image -->
                    <i class="fa fa-arrow-circle-o-down fa-4x"></i>
                </div><!-- col -->

            </div><!-- row -->
        </div><!-- container -->
    </article>
</section><!-- hero -->

<!-- ABOUT SECTION
============================================== -->
<section id="about-nav">
    <div class="container clearfix">
        <div class="row">
            <h2 class="text-center">About</h2>
            <div class="seperator">
                <span></span>
            </div>
            <h4 class="subtitle">Isaiah Cohn, Owner of CohnHead Productions</h4>
            <div class="col-md-4">
                <img class="img-responsive"src="assets/img/Isaiah.jpg" alt="Isaiah Cohn, Owner of CohnHead Productions">
            </div><!-- col -->

            <div class="col-md-8">
                <p class="paragraph-text"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt odit delectus excepturi, unde aperiam explicabo, ducimus harum, temporibus eaque dolorum blanditiis, cumque voluptates! Ipsa, non. Quam, eos fuga assumenda quis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, id possimus sit distinctio minima expedita vero aliquid. Aliquid officia reprehenderit earum, et enim odio, expedita fuga dolorem, modi aliquam molestiae.</span><br>

                <span>Veritatis mollitia, tenetur saepe totam nam accusantium! Autem dignissimos cupiditate nihil libero minus magni quod impedit dicta repellendus. Ipsam quos deserunt illum pariatur delectus officiis totam optio porro voluptatum, est? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus harum, qui totam eligendi quod doloremque iure sint, eveniet quis ut nostrum! Quasi consequuntur nemo doloremque laboriosam mollitia tenetur, earum! Laborum.</span><br>

                <span>Error laboriosam officiis quae quaerat enim hic voluptas architecto sequi, aperiam eaque reiciendis, natus voluptate officia ipsum culpa veritatis pariatur. Laudantium at consectetur, provident molestias obcaecati iste inventore quasi cumque? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus porro, quos fugiat, inventore repudiandae ullam unde sed quis a soluta earum doloremque quas. Illo qui, dolorum. Vel eos, similique aspernatur.</span> </p>
            </div><!-- col -->
        </div><!-- row -->
    </div><!-- container -->
</section>


<!-- SERVICES
============================================== -->
<section id="services-nav">
    <div class="container clearfix">
        <div class="row">
            <h2 class="text-center">Services</h2>
            <div class="seperator">
                <span></span>
            </div><!-- seperator -->
            <h4 class="subtitle">We specialize in creating Professional Highlight Tapes.</h4>
            <div class="col-sm-4">
                <i class="fa fa-film fa-3x">
                    <p>Video</p>
                </i>
                <p class="paragraph-text">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab maxime accusantium, vel consectetur alias dolorem. Nulla numquam excepturi iste temporibus. Beatae, nostrum sapiente quae voluptas at error eaque a modi! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, et repellendus quia delectus saepe asperiores eum, quas perferendis, provident laudantium ut tempore aliquam. Nobis itaque officia, blanditiis. Totam, qui iure. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora quia eligendi, ad quo et nihil maxime minima eius! Quae nihil unde voluptate quod adipisci aliquam magni quam illum deserunt minus.
                </p>
            </div><!-- col -->

            <div class="col-sm-4">
                <i class="fa fa-mobile fa-3x">
                    <p>Contact</p>
                </i>
                <p class="paragraph-text">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab maxime accusantium, vel consectetur alias dolorem. Nulla numquam excepturi iste temporibus. Beatae, nostrum sapiente quae voluptas at error eaque a modi! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, et repellendus quia delectus saepe asperiores eum, quas perferendis, provident laudantium ut tempore aliquam. Nobis itaque officia, blanditiis. Totam, qui iure. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora quia eligendi, ad quo et nihil maxime minima eius! Quae nihil unde voluptate quod adipisci aliquam magni quam illum deserunt minus.
                </p>
            </div><!-- col -->

            <div class="col-sm-4">
                <i class="fa fa-user fa-3x">
                    <p>Sign</p>
                </i>
                <p class="paragraph-text">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab maxime accusantium, vel consectetur alias dolorem. Nulla numquam excepturi iste temporibus. Beatae, nostrum sapiente quae voluptas at error eaque a modi! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, et repellendus quia delectus saepe asperiores eum, quas perferendis, provident laudantium ut tempore aliquam. Nobis itaque officia, blanditiis. Totam, qui iure. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora quia eligendi, ad quo et nihil maxime minima eius! Quae nihil unde voluptate quod adipisci aliquam magni quam illum deserunt minus.
                </p>
            </div><!-- col -->
        </div><!-- row -->
    </div><!-- container -->
</section>


<!-- PLAYERS
============================================== -->
<section id="players-nav">
    <div class="container clearfix">
        <div class="row">
            <h2 class="text-center">Players</h2>
            <div class="seperator">
                <span></span>
            </div><!-- seperator -->
            <h4 class="subtitle">Take a look at some of the players we have helped.</h4>

            <div class="col-md-4">
                <h5 class="players">Chinedu Arinze</h5>
                <img class="player-img" src="assets/img/chinedu.jpg" alt="Chinedu Arinze">
                <p class="paragraph-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quod facilis eaque repellat mollitia pariatur saepe unde cupiditate consequatur minima eligendi, vel omnis, quam voluptatem nesciunt rem, ut placeat eius. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, magni voluptates minima! Voluptas quasi dolores, repellendus asperiores rerum earum omnis vel dicta, cum iure culpa expedita. Ad accusantium reprehenderit alias!</p>

                <iframe width="350" height="300" src="https://www.youtube.com/embed/OQzXulLUurI" frameborder="0" allowfullscreen>
                </iframe>
            </div><!-- col -->

            <div class="col-md-4">
                <h5 class="players">Jason King</h5>
                <img class="player-img jason" src="assets/img/jason.jpg" alt="Jason King">
                <p class="paragraph-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quod facilis eaque repellat mollitia pariatur saepe unde cupiditate consequatur minima eligendi, vel omnis, quam voluptatem nesciunt rem, ut placeat eius. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, magni voluptates minima! Voluptas quasi dolores, repellendus asperiores rerum earum omnis vel dicta, cum iure culpa expedita. Ad accusantium reprehenderit alias!</p>

                <iframe width="350" height="300" src="https://www.youtube.com/embed/1t0snoFXvNI" frameborder="0" allowfullscreen>
                </iframe>
            </div><!-- col -->

            <div class="col-md-4">
                <h5 class="players">Juergen Williams</h5>
                <img class="player-img" src="assets/img/juergen.jpg" alt="Juergen Williams">
                <p class="paragraph-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quod facilis eaque repellat mollitia pariatur saepe unde cupiditate consequatur minima eligendi, vel omnis, quam voluptatem nesciunt rem, ut placeat eius. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, magni voluptates minima! Voluptas quasi dolores, repellendus asperiores rerum earum omnis vel dicta, cum iure culpa expedita. Ad accusantium reprehenderit alias!</p>

                <iframe width="350" height="300" src="https://www.youtube.com/embed/7AhAiJkVwSg" frameborder="0" allowfullscreen>
                </iframe>
            </div><!-- col -->

        </div><!-- row -->
    </div><!-- container -->
</section>


<!-- HIRE US
============================================== -->
<section id="hire-us-nav">
    <div class="container">
        <div class="row">
            <h2 class="text-center">Hire Us</h2>
            <div class="seperator">
                <span></span>
            </div><!-- seperator -->
            <h4 class="subtitle">We'd love to work with you, please use this form to contact us.</h4>
            <div class="col-sm-6 col-centered">
                <form role="form clearfix">
                  <div class="form-group">
                    <label for="contact-email" class="sr-only">Email address</label>
                    <input type="email" class="form-control input-lg" id="contact-email" placeholder="Email">
                  </div>
                  <div class="form-group">
                    <label for="contact-password" class="sr-only">Password</label>
                    <input type="password" class="form-control input-lg" id="contact-password" placeholder="Password">
                  </div>
                  <div class="form-group">
                    <label for="contact-words" class="sr-only">Message</label>
                    <textarea name="" id="contact-words" cols="30" rows="10" class="form-control input-lg"></textarea>
                  </div>
                  <input type="submit" class="btn btn-warning btn-lg pull-right">
                </form>
            </div><!-- col -->
        </div><!-- row -->
    </div><!-- container -->
</section>


<!-- AFFILIATES
============================================== -->
<section>

</section>


<!-- FOOTER
============================================== -->
<section>

</section>
<!-- end snippet -->