Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

HTML

            
              
<body data-spy="scroll" data-target="#myScrollspy">
	
	<!-- Open Navbar -->
	<nav class="navbar navbar-default navbar-fixed-top">
		
		<!-- Open Container Fluid for Nav Spacing and Alignment -->
		<div class="container-fluid">

			<!-- Brand and toggle get grouped for better mobile display -->
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-nav-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="#">Brand</a>
			</div>
			<!-- //Close Mobile Toggle Button -->

			<!-- Collect The Nav Links, and Other Content for Toggling -->
			<div class="collapse navbar-collapse" id="main-nav-collapse">

				<!-- Open Main UL for Nav Links -->
				<ul class="nav navbar-nav">

					<!-- Back To Top Link Only Visible On Small Screens -->
					<li class="hidden-sm hidden-md hidden-lg">
						<a href="#toTop">Back To Top <span class="glyphicon glyphicon-hand-up"></span></a>
					</li>
					<!-- //Close Back To Top Link -->

					<!-- Nav Link with Active State -->
					<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>

					<!-- Nav Link -->
					<li><a href="#">Link</a></li>

					<!-- Dropdown Link for Dropdown Accordion -->
					<li>
						
						<!-- Open Wrapper for Dropdown Accordion -->
						<div class="dropdown dropdown-accordion" data-accordion="#accordion">
							
							<!-- Main Link For Opening Dropdown -->
							<a class="btn dropdown-toggle" href="#" data-toggle="dropdown">
								Accordion Dropdown<span class="glyphicon glyphicon-option-vertical"></span>
							</a>
							<!-- //Close Main Link For Opening Dropdown -->

							<!-- Open Dropdown Menu Wrapper -->
							<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
								
								<!-- Child li element was needed on testing as a wrapper for alignment and functionality -->
								<li>

									<!-- Open Panel Group for Accordion Content and Headings -->
									<div class="panel-group" id="accordion">
										
										
										<!-- Open Panel One -->
										<div class="panel panel-default">

											<!-- Panel Heading Wrapper -->
											<div class="panel-heading">

												<!-- Panel Heading / Accordion Content Toggle -->
												<h4 class="panel-title">
													<a href="#collapseOne" data-toggle="collapse" data-parent="#accordion">Section One <span class="glyphicon glyphicon-option-vertical"></span></a>
												</h4>
												<!-- //Close Panel Heading -->

											</div>
											<!-- //Close Panel Heading Wrapper -->
											
											<!-- Open Panel Collapse Items Wrapper -->
											<div class="panel-collapse collapse" id="collapseOne">

												<!-- Open List Group for Internal Page Links -->
												<ul class="list-group">
													<li class="list-group-item"><a href="#sectionOne">From Beginning</a></li>
													<li class="list-group-item"><a href="#sectionOneSubOne">Item One</a></li>
													<li class="list-group-item"><a href="#sectionOneSubTwo">Item Two</a></li>
													<li class="list-group-item"><a href="#sectionOneSubThree">Item Three</a></li>
												</ul>
												<!-- //Close List Group for Internal Page Links -->

											</div>
											<!-- //Close Panel Collapse Items Wrapper -->

										</div>
										<!-- //Close Panel One -->

										
										<!-- Open Panel Two -->
										<div class="panel panel-default">
											
											<!-- Panel Heading Wrapper -->
											<div class="panel-heading">
												
												<!-- Panel Heading / Accordion Content Toggle -->
												<h4 class="panel-title">
													<a href="#collapseTwo" data-toggle="collapse" data-parent="#accordion">Section Two <span class="glyphicon glyphicon-option-vertical"></span></a>
												</h4>
												<!-- //Close Panel Heading -->
												
											</div>
											<!-- //Close Panel Heading Wrapper -->
											
											<!-- Open Panel Collapse Items Wrapper -->
											<div class="panel-collapse collapse" id="collapseTwo">
												
												<!-- Open List Group for Internal Page Links -->
												<ul class="list-group">
													<li class="list-group-item"><a href="#sectionTwo">From Beginning</a></li>
													<li class="list-group-item"><a href="#sectionTwoSubOne">Item One</a></li>
													<li class="list-group-item"><a href="#sectionTwoSubTwo">Item Two</a></li>
													<li class="list-group-item"><a href="#sectionTwoSubThree">Item Three</a></li>
												</ul>
												<!-- //Close List Group for Internal Page Links -->
												
											</div>
											<!-- //Close Panel Collapse Items Wrapper -->
											
										</div>
										<!-- //Close Panel Two -->
										
										
									</div>
									<!-- //Close Panel Group for Accordion Content and Headings -->
									
								</li>
								<!-- //Close Dropdown Child li -->
								
							</ul>
							<!-- //Close Dropdown Menu Wrapper -->
							
						</div>
						<!-- //Close Wrapper for Dropdown Accordion -->
						
					</li>
					<!-- //Close Dropdown Link for Dropdown Accordion -->
					
				</ul>
				<!-- //Close Main UL for Nav Links -->
				
			</div>
			<!-- //Close Navbar Collapse for Content for Toggling -->

		</div>
		<!-- //Close Container Fluid -->
		
	</nav>
	<!-- //Close Navbar -->

	<!-- Main Content To Show Scroll Spy -->
	<main class="container" name="toTop" id="topPos">

		<!-- Open Row for Page Header -->
		<div class="row">
			<div class="col-md-12">
				<h1 class="page-heading">Main Page Heading</h1>
			</div>
		</div>
		<!-- //Close Row for Page Header -->

		<!-- Open Row for Page Panel Content -->
		<div class="row">

			<!-- Open Full Width Col -->
			<div class="col-md-12">

				<!-- Open Panel -->
				<div class="panel panel-default">

					<!-- Default panel contents -->
					<div class="panel-body">

						<!-- Open Section One -->
						<section id="sectionOne">
							
							<h3>Section One</h3>
							<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 	Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.
							</p>

							<!-- Open Section One Sub Section Wrapper -->
							<div class="sub-section-wrapper">

								<div class="sub-section" id="sectionOneSubOne">
									<h4>Section One Sub-Section One</h4>
									<p>Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.
									</p>
								</div>

								<div class="sub-section" id="sectionOneSubTwo">
									<h4>Section One Sub-Section Two</h4>
									<p>Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.
									</p>
								</div>

								<div class="sub-section" id="sectionOneSubThree">
									<h4>Section One Sub-Section Three</h4>
									<p>Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.
									</p>
								</div>

							</div>
							<!-- //Close Section One Sub Section Wrapper -->

						</section>
						<!-- //Close Section One -->

						<hr>
						
						<!-- ****************************************************

 							For the purpose of saving time and not just repeating
							comment after comment there are no more html comments
							other than closing wrappers after this point! 

						***************************************************** -->

						<section id="sectionTwo">
							<h3>Section Two</h3>
							<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.
							</p>

							<div class="sub-section-wrapper">
								
								<div class="sub-section" id="sectionTwoSubOne">
									<h4>Section Two Sub-Section One</h4>
									<p>Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.
									</p>
								</div>

								<div class="sub-section" id="sectionTwoSubTwo">
									<h4>Section Two Sub-Section Two</h4>
									<p>Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.
									</p>
								</div>

								<div class="sub-section" id="sectionTwoSubThree">
									<h4>Section Two Sub-Section Three</h4>
									<p>Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.
									</p>
								</div>
								
							</div>
							
						</section>

						<hr>

						<section id="sectionThree">
							<h3>Section Three</h3>
							<p>Suspendisse mauris. Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula. Integer adipiscing risus a sem. Nullam quis massa sit amet nibh viverra malesuada. Nunc sem lacus, accumsan quis, faucibus non, congue vel, arcu. Ut scelerisque hendrerit tellus. Integer sagittis. Vivamus a mauris eget arcu gravida tristique. Nunc iaculis mi in ante. Vivamus imperdiet nibh feugiat est.
							</p>
						</section>

						<section id="sectionFour">
							<h3>Section Four</h3>
							<p>Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.
							</p>
						</section>

						<section id="sectionFive">	
							<h3>Section Five</h3>
							<p>Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.
							</p>
						</section>
						
					</div>
					<!-- Default panel contents -->
				
				</div>	
				<!-- //Close Panel -->

			</div>
			<!-- //CLose Full Width Col -->

		</div>
		<!-- //Close Row for Page Panel Content -->

	</main>
	<!-- //Close Main Content To Show Scroll Spy -->
	
	<div id="fake-footer"></div>
	
</body>

            
          
!

CSS

            
              /*
 * The SCSS below is base on customizing a Standard Twitter Bootstrap
 * Download from here - https://getbootstrap.com/getting-started/
 *
 * I have tried to keep it as simple as possible to allow you to see
 * only what is required to make this look useable and easy on the eye.
 *
 * If you require the compiled CSS click the "View Compiled" button
 * in the top right hand cornder of this editor window!
*/


// By starting all selectors with this 
// class selector we should remove the 
// chance for interupting styles elsewhere
// in the Bootstap Download.
//-----------------------------------------//

// Brings the heading down using padding to help back to top link
body {
	padding-top: 80px;	
}

// Prevents awkward scroll window in mobile nav
.navbar-fixed-top .navbar-collapse {
	max-height: 100%;
}

.navbar-default {
	border-bottom: 2px solid #e7e7e7;
}

// Wrapps all accordion dropdown elements
.dropdown-accordion {
	
	// Selects the toggle button in the nav
	.dropdown-toggle {
		// Padding is used to center vertically in the nav
		padding: 15px 8px;
		color: #777;
		border: none;
		background: transparent;
		border-radius: none;
		&:hover {
			color: #333;
		}
	}
	
	// Selects the main dropdown element
	.dropdown-menu {
		padding: 0px;
		margin: 0;
		border: 2px solid #e7e7e7;
		border-top: none;
		background: #eeeeee;
		@media screen and (max-width: 767px) {
			padding: 12px;
			background: #333;
		}
	}
	
	// Selects the headings for each collapse group
	.panel-heading {
		padding: 0;
		background: #eeeeee;
		
		// Selects the link inside the heading wrapper
		a {
		  display: block;
		  padding: 10px 15px;
		}
	}
	
	// Selects the wrapper of your panels
	.panel-group {
		margin: 0;
	}
	
	// Selects the panels inside your panel group
	.panel-default {
		padding: 0;
		border: none;
	}
	
	// Removes the fugly random margin bottom on the list group
	.list-group-item {
		margin: 0;
		a {
			transition-duration: 0.6s;
		}
	}
	
	// Selects the active list item link for propper heighlighting
	.list-group-item.active > a {
		color: #fff;
	}
	
}

.page-heading {
	padding: 20px 0 40px;
	text-align: center;
}

section {
	margin-top: 40px;
}

section:first-of-type {
	margin-top: 0;
}

.sub-section-wrapper {
	margin-top: 40px;
	margin-left: 20px;
}

.sub-section {
	margin-bottom: 40px;
}

.panel-default {
	padding: 20px;
}

#fake-footer {
	height: 600px;
	widith: 100%;
	background: #ccc;
}

/* Helpers for top position on internal page links
====================================================*/
#topPos:before,
.container h3:before,
.container h4:before { 
  display: block; 
  content: " "; 
  margin-top: -80px; 
  height: 80px; 
  visibility: hidden; 
}


            
          
!

JS

            
              // Collapse accordion every time dropdown is shown
$('.dropdown-accordion').on('show.bs.dropdown', function (event) {
  var accordion = $(this).find($(this).data('accordion'));
  accordion.find('.panel-collapse.in').collapse('hide');
});

// Prevent dropdown to be closed when we click on an accordion link
$('.dropdown-accordion').on('click', 'a[data-toggle="collapse"]', function (event) {
  event.preventDefault();
  event.stopPropagation();
  $($(this).data('parent')).find('.panel-collapse.in').collapse('hide');
  $($(this).attr('href')).collapse('show');
});


//Navbar Box Shadow on Scroll 
$(function(){
    var navbar = $('.navbar');
    $(window).scroll(function(){
        if($(window).scrollTop() <= 40){
       		navbar.css('box-shadow', 'none');
        } else {
          navbar.css('box-shadow', '0px 10px 20px rgba(0, 0, 0, 0.4)'); 
        }
    });  
})

//Offset scrollspy height to highlight li elements at good window height
$('body').scrollspy({
	offset: 80
});

// Close Nav When Link Is Selected
$('.panel-body a[href^="#section"], a[href^="#section"]').on('click', function(){
    $('.navbar-collapse').collapse('hide');
	$('.dropdown-toggle').click();
});


//Smooth Scrolling For Internal Page Links
$(function() {
  $('.list-group a[href*=#]:not([href=#]), a[href="#toTop"]').click(function() {
	if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
	  var target = $(this.hash);
	  target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
	  if (target.length) {
		$('html,body').animate({
		  scrollTop: target.offset().top
		}, 1000);
		return false;
	  }
	}
  });
});



            
          
!
999px

Console