getting-started.php

<?php
/*
Template Name: Getting started
*/
?>

<?php include (TEMPLATEPATH . '/header-simple.php'); ?>

<div class="getting-started container">
	<div class="clearfix row">				
		<div class="col-md-3">
			<div class="sidebarContainer">

				<div class="sidebarMain">
					<h5>Table of Contents</h5>
					<div id="theAffix" role="tablist" class="list-group" aria-multiselectable="true">
						<a href="#intro" class="list-group-item">Intro</a>
							
						<!-- <a href="#works" data-toggle="" class="list-group-item"></a> -->
						 <a data-toggle="collapse" data-parent="#theAffix" href="#works" class="list-group-item">
                    		How it all works</a>
							<ul id="works" class="collapse">
								<li><a href="#internet">The Internet</a></li>
								<li><a href="#web">The World Wide Web or “The Web”</a></li>
							</ul>

							<a data-toggle="collapse" data-parent="#theAffix" href="#clientvsserver" class="list-group-item">
                    		The Client Side vs. the Server Side</a>
							<ul id="clientvsserver" class="collapse">
								<li><a href="#client">Client side</a></li>
								<li><a href="#server">Server side</a></li>
							</ul>
							
						
						<a data-toggle="collapse" data-parent="#theAffix" href="#workflow" class="list-group-item">
                    		Helpful Workflow Tools</a>
							<ul id="workflow" class="collapse">
								<li><a href="#cms">CMS</a></li>
								<li><a href="#cli">Command line interface</a></li>
								<li><a href="#git">Git and Github</a></li>
								<li><a href="#texteditor">Text editor</a></li>
								<li><a href="#ftp">FTP</a></li>
							</ul>
					
						<a href="#conclusion" class="list-group-item">Conclusion</a>
						<a href="#startlearning" class="list-group-item">Where to start learning </a>
						
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-9" role="main">

			<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
						
				<article id="post-<?php the_ID(); ?>" <?php post_class('clearfix'); ?> role="article">
							
					<header class="skinny-header">
						<h1><?php the_title(); ?></h1>
						<?php
							$subtitle	= get_field('subtitle');							
							if( ($subtitle)  )
								{
								echo '<p class="subtitle text-center">'.$subtitle.'</p>';
								}
						?>				
					</header> <!-- end article header -->
					
					<hr class="small-hr">	
						
					<article>
						<section class="post-content clearfix">
							<?php the_content(); ?>
						</section>			
					</article> <!-- end article section -->
							
				
					<footer>
						<div class="btm-social text-center">
							<p>You've made it this far...why don't we make our friendship official? <i class="fa fa-smile-o"></i></p>
							<a href="https://www.facebook.com/learntocodewithme" class="facebook"><i class="fa fa-facebook-square fa-2x"></i></a>
	      					<a href="https://twitter.com/learncodewithme" class="twitter"><i class="fa fa-twitter-square fa-2x"></i></a>
	      					<a href="https://www.linkedin.com/in/laurencebradford" class="linkedin"><i class="fa fa-linkedin-square fa-2x"></i></a>								
						</div>
					</footer> <!-- end article footer -->
											
				</article> <!-- end article -->						
						
				<?php endwhile; ?>	
						
				<?php else : ?>
						
				<article id="post-not-found">
				    <header>
				    	<h1><?php _e("Not Found", "wpbootstrap"); ?></h1>
				    </header>
				    <section class="post_content">
				    	<p><?php _e("Sorry, but the requested resource was not found on this site.", "wpbootstrap"); ?></p>
				    </section>
				    <footer>

				    </footer>
				</article>
				
				<?php endif; ?>
				
		</div> <!-- end #main -->

	</div> <!-- end getting started -->

<?php get_footer(); ?>

getting-started.scss

.getting-started {

	margin-bottom: $base*2;
	.sidebarContainer {
		position: relative;
		margin-top: 50px;
		.sidebarMain {
			position: fixed;
			.list-group {
				border: none;
				border-radius: 0;
				.list-group-item {
					font-size: $sm-font;
					border: none;
					border-radius: 0;
					border-left: 2px solid transparent;
					&:active {
						background: white !important;
						color: inherit;
						border-left: 2px solid $teal;
					}
					&:hover {
						background: transparent;
						border-left: 2px solid lighten($teal, 10%);
						background: white !important;
					}
				}
			}
			ul {
				font-size: $sm-font;
				list-style: none;

			}
		}
		@media (max-width: $screen-sm-max) {
			display: none;
		}
	} // .sidebarContainer 


}