<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<header>
</header>
<div class="container">
<div class="row centered">
<div class="col-lg-12">
<h1>Fixed left nav</h1>
<p>Lorem ipsum</p>
</div>
<div class="col-lg-12">
<img class="img-responsive m-20" src="http://placehold.it/2000x500"/>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="navigation">
<h5>Heading</h5>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
<h5>Heading</h5>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
<h5>Heading</h5>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
</div>
<div class="col-lg-8 centered">
<section class="step col-6">
<h2 class="step-header m-20">Step 1: Fixing a fence</h2>
<p>When purchasing your fence post make sure it is a third longer than the height of your fence panels and your
gravel board. Also measure the width and depth, as there are two sizes 100mm x 100mm and 75mm x 75mm.</p>
<p>Start by detaching the fence panels from the damaged post. If these are nailed in you can use your hammer or a
nail bar to pry them loose. However, this method could damage your panels if not done carefully. Should you wish
to retain your existing panels you can use a hacksaw blade to cut the nails, then hammer them flat for safety.</p>
<figure class="section__picture">
<img class="img-responsive" src="http://placehold.it/800x400" alt="image description">
</figure>
</section>
<section class="step col-6">
<h2 class="step-header m-20">Step 2: Fixing a fence</h2>
<p>When purchasing your fence post make sure it is a third longer than the height of your fence panels and your
gravel board. Also measure the width and depth, as there are two sizes 100mm x 100mm and 75mm x 75mm.</p>
<p>Start by detaching the fence panels from the damaged post. If these are nailed in you can use your hammer or a
nail bar to pry them loose. However, this method could damage your panels if not done carefully. Should you wish
to retain your existing panels you can use a hacksaw blade to cut the nails, then hammer them flat for safety.</p>
<figure class="section__picture">
<img class="img-responsive" src="http://placehold.it/800x400" alt="image description">
</figure>
</section>
<section class="step col-6">
<h2 class="step-header m-20">Step 3: Fixing a fence</h2>
<p>When purchasing your fence post make sure it is a third longer than the height of your fence panels and your
gravel board. Also measure the width and depth, as there are two sizes 100mm x 100mm and 75mm x 75mm.</p>
<p>Start by detaching the fence panels from the damaged post. If these are nailed in you can use your hammer or a
nail bar to pry them loose. However, this method could damage your panels if not done carefully. Should you wish
to retain your existing panels you can use a hacksaw blade to cut the nails, then hammer them flat for safety.</p>
<figure class="section__picture">
<img class="img-responsive" src="http://placehold.it/800x400" alt="image description">
</figure>
</section>
<section class="step col-6">
<h2 class="step-header m-20">Step 4: Fixing a fence</h2>
<p>When purchasing your fence post make sure it is a third longer than the height of your fence panels and your
gravel board. Also measure the width and depth, as there are two sizes 100mm x 100mm and 75mm x 75mm.</p>
<p>Start by detaching the fence panels from the damaged post. If these are nailed in you can use your hammer or a
nail bar to pry them loose. However, this method could damage your panels if not done carefully. Should you wish
to retain your existing panels you can use a hacksaw blade to cut the nails, then hammer them flat for safety.</p>
<figure class="section__picture">
<img class="img-responsive" src="http://placehold.it/800x400" alt="image description">
</figure>
</section>
</div>
</div>
</div>
<footer>
</footer>
</footer>
.navigation {
background: #eeeeee;
width: 100%;
padding: 20px;
box-sizing: border-box;
}
.img-responsive {
max-width: 100%;
}
.m-20 {
margin-bottom: 20px;
}
.section__picture {
margin-bottom: 0;
}
.step {
margin-bottom: 20px;
float: left;
}
.centered {
text-align: center;
}
footer {
background: #0a3055;
height: 80px;
margin-top: 20px;
}
header {
background: #0a3055;
height: 80px;
margin-bottom: 20px;
}
.step-header-fixed {
background: #eeeeee;
font-size: 22px;
padding: 10px;
color: #3e3e3e;
margin-bottom: 0 !important;
}
// plugin from: https://github.com/leafo/sticky-kit
(function(){var c,f;c=this.jQuery||window.jQuery;f=c(window);c.fn.stick_in_parent=function(b){var A,w,B,n,p,J,k,E,t,K,q,L;null==b&&(b={});t=b.sticky_class;B=b.inner_scrolling;E=b.recalc_every;k=b.parent;p=b.offset_top;n=b.spacer;w=b.bottoming;null==p&&(p=0);null==k&&(k=void 0);null==B&&(B=!0);null==t&&(t="is_stuck");A=c(document);null==w&&(w=!0);J=function(a){var b;return window.getComputedStyle?(a=window.getComputedStyle(a[0]),b=parseFloat(a.getPropertyValue("width"))+parseFloat(a.getPropertyValue("margin-left"))+
parseFloat(a.getPropertyValue("margin-right")),"border-box"!==a.getPropertyValue("box-sizing")&&(b+=parseFloat(a.getPropertyValue("border-left-width"))+parseFloat(a.getPropertyValue("border-right-width"))+parseFloat(a.getPropertyValue("padding-left"))+parseFloat(a.getPropertyValue("padding-right"))),b):a.outerWidth(!0)};K=function(a,b,q,C,F,u,r,G){var v,H,m,D,I,d,g,x,y,z,h,l;if(!a.data("sticky_kit")){a.data("sticky_kit",!0);I=A.height();g=a.parent();null!=k&&(g=g.closest(k));if(!g.length)throw"failed to find stick parent";
v=m=!1;(h=null!=n?n&&a.closest(n):c("<div />"))&&h.css("position",a.css("position"));x=function(){var d,f,e;if(!G&&(I=A.height(),d=parseInt(g.css("border-top-width"),10),f=parseInt(g.css("padding-top"),10),b=parseInt(g.css("padding-bottom"),10),q=g.offset().top+d+f,C=g.height(),m&&(v=m=!1,null==n&&(a.insertAfter(h),h.detach()),a.css({position:"",top:"",width:"",bottom:""}).removeClass(t),e=!0),F=a.offset().top-(parseInt(a.css("margin-top"),10)||0)-p,u=a.outerHeight(!0),r=a.css("float"),h&&h.css({width:J(a),
height:u,display:a.css("display"),"vertical-align":a.css("vertical-align"),"float":r}),e))return l()};x();if(u!==C)return D=void 0,d=p,z=E,l=function(){var c,l,e,k;if(!G&&(e=!1,null!=z&&(--z,0>=z&&(z=E,x(),e=!0)),e||A.height()===I||x(),e=f.scrollTop(),null!=D&&(l=e-D),D=e,m?(w&&(k=e+u+d>C+q,v&&!k&&(v=!1,a.css({position:"fixed",bottom:"",top:d}).trigger("sticky_kit:unbottom"))),e<F&&(m=!1,d=p,null==n&&("left"!==r&&"right"!==r||a.insertAfter(h),h.detach()),c={position:"",width:"",top:""},a.css(c).removeClass(t).trigger("sticky_kit:unstick")),
B&&(c=f.height(),u+p>c&&!v&&(d-=l,d=Math.max(c-u,d),d=Math.min(p,d),m&&a.css({top:d+"px"})))):e>F&&(m=!0,c={position:"fixed",top:d},c.width="border-box"===a.css("box-sizing")?a.outerWidth()+"px":a.width()+"px",a.css(c).addClass(t),null==n&&(a.after(h),"left"!==r&&"right"!==r||h.append(a)),a.trigger("sticky_kit:stick")),m&&w&&(null==k&&(k=e+u+d>C+q),!v&&k)))return v=!0,"static"===g.css("position")&&g.css({position:"relative"}),a.css({position:"absolute",bottom:b,top:"auto"}).trigger("sticky_kit:bottom")},
y=function(){x();return l()},H=function(){G=!0;f.off("touchmove",l);f.off("scroll",l);f.off("resize",y);c(document.body).off("sticky_kit:recalc",y);a.off("sticky_kit:detach",H);a.removeData("sticky_kit");a.css({position:"",bottom:"",top:"",width:""});g.position("position","");if(m)return null==n&&("left"!==r&&"right"!==r||a.insertAfter(h),h.remove()),a.removeClass(t)},f.on("touchmove",l),f.on("scroll",l),f.on("resize",y),c(document.body).on("sticky_kit:recalc",y),a.on("sticky_kit:detach",H),setTimeout(l,
0)}};q=0;for(L=this.length;q<L;q++)b=this[q],K(c(b));return this}}).call(this);
$(".navigation").stick_in_parent({
offset_top: 20,
});
