Edit on
<html class="">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta charset=utf-8 />
	<head>
		<title>v3</title>
		<!-- fonts -->
		<link rel="stylesheet" type="text/css" href="https://codepen.io/RYJASM/pen/6428d62fbf04420ad3bd1150c2949ae6.css">

	</head>
	<body>
		<div class="show_gateway hero_header hide_page_sidebar">
			<div class="main_header">
				<div class="main_navigation">
					<ul class="navigation charm_nav">
						<li><a href="#"><i class="fa fa-map-marker"></i>Campus Map</a></li>
						<li><a href="#"><i class="fa fa-users"></i>Find People</a></li>
						<li><a href="#"><i class="fa fa-calendar"></i>Calendar</a></li>
						<li><a href="#"><i class="fa fa-sitemap"></i>A to Z Index</a></li>
					</ul>
					<ul class="navigation main_nav">
						<div class="logo_holder">
							[[[https://codepen.io/RYJASM/pen/PqZdNL]]]
						</div>
						<li class="has_search">
							<form class="search main_search">
								<input class="search_box" type="text" placeholder="Search Missouri S&T" />
								<button class="search_button" type="submit" value><i class="fa fa-search"></i></button>
							</form>
						</li>
						<li><a href="https://s.codepen.io/RYJASM/debug/ZGGwbm?">Future Students</a>
							<ul><li><a href="http://futurestudents.mst.edu/">Information for Future Students</a></li>
								<li class="special"><a href="http://futurestudents.mst.edu/degrees/">Majors and Degrees</a></li>
								<li class="special"><a href="http://futurestudents.mst.edu/visit/">Campus Visit Programs</a></li>
								<li class="special"><a href="http://futurestudents.mst.edu/apply/">Apply for Admission</a></li>
								<li class="special"><a href="http://futurestudents.mst.edu/costs/">Costs and Fees</a></li>
								<li class="special"><a href="http://futurestudents.mst.edu/requestinfo/">Request Information</a></li>
								<li><a href="http://futurestudents.mst.edu/">Admissions</a></li>
								<li><a href="http://dce.mst.edu/index.html">Distance and Continuing Education</a></li>
								<li><a href="http://sfa.mst.edu/">Financial Aid and Scholarships</a></li>
								<li><a href="http://reslife.mst.edu/">Student Housing</a></li>
								<li><a href="http://pro.mst.edu/">New Student Orientation</a></li>
								<li><a href="http://futurestudents.mst.edu/summercamps/">Summer Camps and Pre-college Programs</a></li>
								<li><a href="http://ugs.mst.edu/">Undergraduate Studies</a></li>
								<li><a href="http://grad.mst.edu/">Graduate Studies</a></li>
								<li><a href="http://studentlife.mst.edu/">Student Life and Campus Activities</a></li>
							</ul>
						</li>
						<li><a href="#">Current Students</a></li>
						<li><a href="#">Alumni</a></li>
						<li><a href="#">Faculty and Staff</a></li>
						<li><a href="#">Community</a></li>
						<li><a href="#">Giving</a></li>
					</ul>
				</div>
			</div>

			<div class="site">
				<div class="site_header">
					<div class="gateway">
						<div class="slide1">
							<div class="text_positioner inverted inverted" data-wow-duration="0.3s">
									<h1 class="gateway_title">
										Gantner engineers his path to Google
									</h1>
									<p>
										Nulla bibendum dignissim sapien eget imperdiet. Donec feugiat massa id turpis malesuada dictum. Duis sed facilisis nunc. Donec facilisis tortor a felis iaculis, sit amet tempor velit sagittis. Morbi nec bibendum nisl, in pellentesque tortor. Sed at metus
										enim. <a href='#'>Read More.</a>
									</p>
							</div>
						</div>
												<div class="slide2">
							<div class="text_positioner inverted inverted" data-wow-duration="0.3s">
									<h1 class="gateway_title">
										Gantner engineers his path to Google
									</h1>
									<p>
										Nulla bibendum dignissim sapien eget imperdiet. Donec feugiat massa id turpis malesuada dictum. Duis sed facilisis nunc. Donec facilisis tortor a felis iaculis, sit amet tempor velit sagittis. Morbi nec bibendum nisl, in pellentesque tortor. Sed at metus
										enim. <a href='#'>Read More.</a>
									</p>
							</div>
						</div>
					</div>
					<div class="hero_message">
						<h1>>><br>eat<br>sleep<br>rove</h1>
					</div>
					<div class="site_info ">
						<div  class="title_area">
							<span class="site_title">Department of Design Templates</span>
							<span class="site_description">
								Making templates a better place.
							</span>
						</div>
						<div class="site_contact_info">
							<ul class="contact_info">
								<li id="target" class="contact">
									<a href="https://www.google.com/maps/dir/37.9536016,-91.7754544/@37.9532812,-91.7754088,19z/data=!4m3!4m2!1m0!1m0">
										<label><i class="fa fa-map-marker"></i>
										</label><span>105 Campus Support Facility, 1201 N. State St.</span>
									</a>
								</li>
								<li class="contact">
									<a href="tel:+1-573-341-4328">
										<label><i class="fa fa-phone"></i>
										</label><span>(573) 341-4328</span>
									</a>
								</li>
								<li class="contact">
									<a href="mailto:marketing@mst.edu">
										<label><i class="fa fa-envelope"></i>
										</label><span>marketing@mst.edu</span>
									</a>
								</li>
							</ul>
						</div>
					</div>
				</div>  
				<div class="site_navigation">
					<ul class="navigation site_nav">
						<li class="has_search">
							<form class="search page_search">
								<input class="search_box" type="text" placeholder="Search this site" />
								<button class="search_button" type="submit" value><i class="fa fa-search"></i></button>
							</form>
						</li>
						<li class="selected"><a href="#">Department Overview</a>
							<ul>
								<li><a href="#">From the Department Chair</a></li>
								<li><a href="#">Accreditation</a></li>
								<li><a href="#">Our Mission</a></li>
							</ul>
						</li>
						<li><a href="#">Academic Programs</a>
							<ul>
								<li><a href="#">Undergraduate</a></li>
								<li><a href="#">Graduate</a></li>
							</ul>
						</li>
						<li><a href="#">Student Opportunities</a></li>
						<li><a href="#">Research</a></li>
						<li><a href="#">Faculty and Staff</a></li>
						<li><a href="#">Department Activities</a></li>
					</ul>
				</div>
				<div class="site_breadcrumbs">
					<ul class="breadcrumbs">
						<li><a class="az_index"><i class="fa fa-sitemap"></i></a> <a href="#">Parent Division</a></li>
						<li><a href="#">laze.mst.edu</a></li>
						<li><a href="#">Department Overview</a></li>
						<li><a href="#">Our Mission</a></li>
					</ul>
				</div>
				<div class="page">
					<div class="page_columns">
						<div class="page_content">
							<!-- sample content -->
							[[[https://codepen.io/RYJASM/pen/JogQOV]]]

							<!-- Image with Description -->
							[[[https://codepen.io/RYJASM/pen/eNJdGR]]]

							<!-- Accordion Boxes -->
							[[[https://codepen.io/RYJASM/pen/GJoNoo]]]

							<!-- Accordion Boxes with column -->
							[[[https://codepen.io/RYJASM/pen/VLemzL]]]

							<!-- standard slideshow 
   [[[https://codepen.io/RYJASM/pen/QbjNBV]]]-->

							<!-- wrapping body content -->
							[[[https://codepen.io/RYJASM/pen/oXjxJY]]]

							<!-- parallax block -->
							[[[https://codepen.io/RYJASM/pen/9934ecfad46884d1ce75b5926a224d1d]]]

							<!-- focus boxes -->
							[[[https://codepen.io/RYJASM/pen/bdbxpa]]]

							<!-- csv table -->
							[[[https://codepen.io/RYJASM/pen/LVEWgV]]]

							<!-- card link -->
							[[[https://codepen.io/RYJASM/pen/jPEBeK]]]


						</div>
						<div class="page_sidebar">
						</div>
					</div>
				</div>
				<!-- bottom half of page layout -->
				<div class="footer">
					<div class="footer_one">
						<!-- spotlights -->
						[[[https://codepen.io/RYJASM/pen/yymmaZ]]]
					</div>
					<div class="footer_two  ">
						<div class="footer_stats">
							<div class="column_holder">
								<div class="column middle half">

									<div class="et-wrapper et-rotate" et-in="rotateSlideIn" et-out="rotateSlideOut">

									</div>

								</div>
								<div class="column middle half">

								</div>
							</div>
						</div>
					</div>
					<div class="footer_three">
						<div class="official_links">

						</div>
					</div>
				</div>
				</body>
			</html>
/* Bring it all together here

////////////
These scss/css files are linked via the css gear... 
They won't link and compile as below unfortunately. Even though this is
how it will be structured once everything is moved to my local server.
I can't label them in the external resources. So I labeled them here.
////////////




//////////// supporting mixins and variables ////////////

// * base variables
@import 'https://codepen.io/RYJASM/pen/5758a4bc7720d1a5fae745576039c4f3.scss';

// * @mixin navigation 
@import 'https://codepen.io/RYJASM/pen/349b59c413d0f13650f1fa859e7ccdc5.scss';

// * @mixin page customizations
@import '';

//////////// end supporting mixins and variables ////////////



//////////// mixin customizations ////////////

// * default navigation colors
@import '';

// * default page mixin customizations
@import '';

////////// end mixin customizations ///////////




//////////// static page structure settings ////////////

// * page structure: load last for customization overrides

@import 'f.scss';

//// end static page structure settings ////




//////////// content types ////////////

// * card link
@import 'https://codepen.io/RYJASM/pen/jPEBeK.scss';

// * csv table
@import 'https://codepen.io/RYJASM/pen/LVEWgV.scss';

// * focus boxes
@import 'https://codepen.io/RYJASM/pen/bdbxpa.scss';

// image section - previously parallax banner
@import 'https://codepen.io/RYJASM/pen/9934ecfad46884d1ce75b5926a224d1d.scss';

//////////// end content types /////////////




//////////// Element Transitons: For element transitions JS
@import 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/220427/elementTransitions.css';

*//*
.site_header {
background: none !important;
}*/

.show_gateway {
	.site_header {
		background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/220427/20140903_bertelsmeyer_hall_sunset_141.jpg);
		background-size: cover;
		background-position: center 33.334%;
		padding-top: 5rem;
	}
	.gateway {
		display: block !important;
		padding-top: 28vw;
		.gateway_title {

		}
		.text_positioner {
			$background: rgba(40, 40, 40, 0.75);
			padding-top: 1.5rem;
			padding-bottom: 1.5rem;
			margin: 0;
			background: $background;
			padding: $page_margin/2;
			@extend %content_margins;
			@extend %content_item_formatting;
			@include bleed_edges($background);
		}
		@media screen and (min-width: $main_break_point) {
			.gateway_title {
				display: inline-block;
				margin: 10rem 0;
				font: 100 3.75vw/1.2em $heading_font;
				color: #fff;
				background: rgba(112, 203, 38, 0.66);
				padding: 0.25em 0.25em;
				position: absolute;
				top: -5em;
				left: 0;
			}
			.text_positioner {
				padding-left: 0;
				padding-right: 0;
			}
		}
	}
	.site_breadcrumbs {
		display: none !important;
	}
	.page_sidebar {
		display: none;
	}
	.page {
		border-top: 0.25rem solid $lime_green;
	}
	.site_info {
		display: none !important;
	}
	.site_navigation, .site_navigation * {
		display: none !important;
	}

}
View Compiled
////////////////// Navigation ////////////////////
//
//// Overview: A responsive, collapsing, mobile menu enabled, drop down menu system
//
//	* Applies functions to ul.navigation elements on the page
//	* Collapses menu items into a "more" menu

////  Dependencies
//
//	 Must define mobile width stop point, originally defined in my page_structure.scss
//  - Depends on navigation.scss: the whole concept is dependent on a right aligned navigation
//  	-- For left aligned, you must switch to a <total child widths>:<parent width> comparison technique
//		-- I assume this takes more processing time, so I opted for position
//  - Must define customization options for each menu, using mixin provided in the navigation.scss


//// Functions: details on each function are inline as the function progresses
//
//	Add elements to navigation
//  	--> function addNavigationElements( selectedNav )
//
//  Collapse the navigation into a "more" menu
//  	--> function collapseNavigationElements( selectedNav )
//
//  Add actions to the navigation elements
//		--> function addNavigationActions( selectedNav )
//
//  Make sure that dropdowns don't fall off the screen
//		--> function theDropSide( selectedNav )
//
// Determine the best side for the drop down menus to open on
function theDropSide( dropdown_holder ) {
	var pageWidth = $(window).width();
	dropdown_holder.each( function() {
		// convert menu position from left side into a percentage
		var dropSide = 100 * ( $(this).offset().left / pageWidth ); 
		// if it's more than half way across the page, drop to the left, else right
		if( dropSide < 50 ) {
			$(this).removeClass('left_side');
		}
		if( dropSide > 50 ) {
			$(this).addClass('left_side');	
		}	
	});
}

//// Navigation Functions
// Add any extra elements for UI to navigation
function addNavigationElements( selectedNav ) {
	var dropdown_holder = selectedNav.find('ul').parent();
	// Add the Menu Expander at the top of the navigation list
	selectedNav.prepend('<div class="menu_expander"><span class="expand_button"></span></div>');
	// Add the dropdown class to any li that has a ul inside of it
	dropdown_holder.toggleClass("dropdown");
	// Add the dropdown caret icon
	dropdown_holder.children('a').prepend('<span class="drop_caret"></span>');

}	

// Collapse navigation elements that don't fit the navigation width into an overflow menu
function collapseNavigation( selectedNav ) {
	// ignore the charm navigation: will probably pull the charm navigation out
	// since it has developed into a different mini-beast (rabid hamster?) all together
	if( !selectedNav.hasClass('charm_nav') && selectedNav.parent().css('display') != 'none' ){
		var windowWidth = $(window).outerWidth();
		// if you want a little left padding in pixels, increase this
		var navAdjustment = 0;
		// adjust for the logo being in the way
		if( selectedNav.hasClass('main_nav') ) {
			var mainNavPadding = $('.logo_holder').outerWidth();
			navAdjustment += mainNavPadding;
		}
		// navigation item elements
		var lastMenuItem = selectedNav.children('li:not(".overflow_holder")').last();
		var firstMenuItem = selectedNav.children('li:not(".has_search")').first();

		// overflow elements
		var overflowHTML = '<li class="overflow_holder dropdown"><a href="#">More<span class="drop_dots"></span></i></a><ul class="overflow_menu"></ul></li>';
		var overflowHolder =  selectedNav.children('li.overflow_holder');
		var overflowMenu = overflowHolder.children('ul.overflow_menu');

		// distance of 1st item from menu edge
		var positionFromLeft = selectedNav.children('li:not(".has_search")').first().position().left;		

		// overflow item elements
		var firstInList = overflowMenu.children('li:first-of-type');
		var firstInListWidth = firstInList.outerWidth();
		if( positionFromLeft <= navAdjustment && windowWidth != firstMenuItem.outerWidth()  ) {
			if( overflowMenu.length === 0 ) {
				// if overflow menu doesn't exist, add it
				selectedNav.append( overflowHTML );	

			}
			// if 1st menu item is too close to menu edge,
			// add it to overflow menu
			lastMenuItem.prependTo( overflowMenu );

			if( windowWidth > 900 ) {
				// if there isn't a menu item and the window isn't in mobile mode, run again
				// mobile break point is 800px
				collapseNavigation( selectedNav );
			}
		}
		if( positionFromLeft  > ( firstInListWidth + navAdjustment) ) {
			// if 1st menu is far enough away fromm menu edge
			// for the 1st overflow item to fit, move it back out
			firstInList.insertAfter( lastMenuItem );
		}
		if( ( overflowMenu.children().length === 0 ) || ( windowWidth <= firstInListWidth ) ) {	
			// if the overflow menu is empty and the list is the same width or
			// great (aka mobile mode), drop the overflow menu
			overflowMenu.children().appendTo(selectedNav);
			overflowHolder.remove();
		}
	}
}
function addNavigationActions( selectedNav ) {
	var dropdown_caret = selectedNav.find('.drop_caret');
	var expand_button = selectedNav.find('.expand_button');
	var dropdown_holder = selectedNav.find('.dropdown');
	// attach click handler to expand button
	expand_button.click( function(){
		// add expanded to the ul.navigation element
		$(this).parent().parent().toggleClass("expanded");
	});

	// attach click handler to the dropdown caret
	dropdown_caret.click( function(event) {
		event.preventDefault();
		// close other expanded menus
		// dropdown_holder.children('.expanded').removeClass('expanded')
		$(this).parent().parent().children('ul').toggleClass('expanded');
	});
	dropdown_holder.hover( function() {
		theDropSide($(this));
	});
}
/////////////////////// End Navigation ////////////////////////








//////////////////// Scrolling Animations /////////////////////
// * uses wow.js

function addMuchWow() {
	wow = new WOW(
		{
			boxClass:     'content_item',      // default
			animateClass: 'bounceInUp', // default
			offset:       0,          // default
			mobile:       true,       // default
			live:         true        // default
		}
	)
	wow.init();
}

////////////////// End Scrolling Animations ////////////////////








///////////////////// Load page functions //////////////////////
// on: load, resize, ready

// Activate Navigation Functions
var navigation = $('ul.navigation');

// when the html structure has loaded
$(window).ready(function() {
	navigation.each( function(){
		addNavigationElements( $(this) );		
		addNavigationActions( $(this) );
		// push non fitting menu items into overflow/more menu
		collapseNavigation( $(this) );
	});
	// move sidebar content items to sidebar column
	if ($('.page_content .sidebar_block').length) {
		sidebars = true;
		$('.page_sidebar').append($('.page_content .sidebar_block'));
	}
	$('.gateway').bxSlider();
});

// when everything has loaded
$(window).on('load', function(){		
	navigation.each( function(){		
		// make sure dropdowns don't go offscreen
		// choose the dropdown positions
		dropdown_holder = $(this).find('.dropdown');		
		theDropSide( dropdown_holder );
	});
	// activate the scoll animation effects
	new WOW().init();
});

// when the window resizes
$(window).on('resize', function(){
	navigation.each( function(){	
		// push non fitting menu items into overflow/more menu
		collapseNavigation( $(this) );
		// make sure dropdowns don't go offscreen
		// choose the dropdown positions
		var dropdown_holder = $(this).find('.dropdown');
		theDropSide( dropdown_holder );		
	});
});

/*
$().ready(function() {
	$('.site_header').tubular({videoId: 'YrddaP6ml1M'}); // where idOfYourVideo is the YouTube ID.
});
*/



Rerun