diff --git a/www/source/community.html.slim b/www/source/community.html.slim
index 56d2623e6..220cbf8dd 100644
--- a/www/source/community.html.slim
+++ b/www/source/community.html.slim
@@ -3,14 +3,14 @@ title: InSpec - Community
 description: This is where you interact with the InSpec open source community - contribute to the project, provide feedback and ask questions of other community members.
 ---
 
-.row.margin-both-offset
+.row.margin-both
   .columns.large-6.medium-6
-    h2#icon-trigger data-enllax-direction="horizontal" data-enllax-ratio=".1" data-enllax-type="foreground"
+    h2#icon-trigger.columns data-enllax-direction="horizontal" data-enllax-ratio=".1" data-enllax-type="foreground"
       | Inspec is better with friends.
       br/
       | Let’s build together.
-    hr.strict-left
-    h3.margin-top
+    hr.strict-left.margin-under
+    h3.clear
       | Join us on Slack and get answers fast
     P
       | Is something unclear or are you just feeling stuck?  We're here to help keep you moving. Chat with us on Slack, so we can help you keep moving.
diff --git a/www/source/javascripts/nav.js b/www/source/javascripts/nav.js
index 699ab0b7e..55f099090 100644
--- a/www/source/javascripts/nav.js
+++ b/www/source/javascripts/nav.js
@@ -1,43 +1,27 @@
 // Nav Scripts
-const $navLinks = $('.main-nav--links');
-const $navToggle = $('.main-nav--toggle');
-const navBreakpoint = 730; // this should match $nav-breakpoint in _nav.scss
-const $mainContent = $('#main-content');
+const navBreakpoint = 710;
 const $mainNav = $('#main-nav');
-const $mainNavCtas = $('#main-nav-ctas');
+const $navLinks = $('.main-nav--link-text');
+const $navToggle = $('.main-nav--toggle');
+const currentPagePath = location.pathname;
+const navPageLinks = [ 'docs', 'tutorials', 'community'];
+const stickyBreakpoint = 120;
+const stickyVisibleBreakpoint = 160;
+
 
 $navToggle.click(function() {
-  $(this).toggleClass('is-active');
   $navLinks.slideToggle();
+  $mainNav.toggleClass('t-purple');
 });
 
-$(window).resize(function() {
-  if ($(window).width() >= navBreakpoint) {
-    $navToggle.removeClass('is-active');
-    $navLinks.attr("style", "");
+for (var linkName in navPageLinks) {
+  var linkNamePath = navPageLinks[linkName],
+      currentPageRoot = currentPagePath.split('/')[1];
+  if (currentPageRoot == linkNamePath) {
+    $('a.main-nav--link-text' + navPageLinks[linkName]).addClass('t-purple');
   }
-});
+};
 
-// toggles fixed nav position when the window is too short
-var footerOffsetTop, navOffsetBottom;
-
-function toggleFixedNavPosition() {
-  navOffsetBottom = $mainNav.outerHeight() + $(window).scrollTop();
-  footerOffsetTop = $("#main-footer").offset().top;
-
-  $mainNav.toggleClass("is-fixed-bottom", (footerOffsetTop < navOffsetBottom) && $(window).height() <= 759)
-}
-
-$(document).ready(function() {
-  $mainContent.css('min-height', $mainNav.outerHeight() - $('#main-nav-ctas').outerHeight());
-  toggleFixedNavPosition();
-});
-
-$(window).scroll(function() {
-  toggleFixedNavPosition();
-});
-
-//
 
 
 // handle nav when global message exists
diff --git a/www/source/layouts/_nav.slim b/www/source/layouts/_nav.slim
index 02f506b22..33e2cbe4f 100644
--- a/www/source/layouts/_nav.slim
+++ b/www/source/layouts/_nav.slim
@@ -1,27 +1,27 @@
-nav#main-nav class="sidebar-layout-#{locals[:sidebar_layout]}"
-
-  = partial "layouts/svg/nav-icon.svg"
-
-    - if locals[:sidebar_layout] == 'docs'
-      li.main-nav--sidebar
-        = partial "layouts/sidebar"
-    - else
 
+nav
   <progress value="0"></progress>
 
-nav#main-nav-ctas
-  a.main-nav--logo href="/"
-    img src="/images/inspec-by-chef-logo.svg" onerror="this.src='/images/inspec-by-chef-logo.png'"
-  a href="/tutorials"
-    span.main-nav--link-text Tutorials
-  a href="/docs"
-    span.main-nav--link-text Docs
-  a href="/community"
-    span.main-nav--link-text Community
-  a href="https://github.com/chef/inspec"
-    i.fa.fa-github-alt
-    span.main-nav--link-text Github
-  a.btn.try-demo href="#" Try the Demo
-  a.btn href="https://downloads.chef.io/inspec"
-    i.fa.fa-cloud-download
-    span.main-nav--link-text Download
+  #main-nav-ctas
+    a.main-nav--logo href="/"
+      img src="/images/inspec-by-chef-logo.svg" onerror="this.src='/images/inspec-by-chef-logo.png'"
+    ul
+      li
+        a href="/tutorials"
+          span.main-nav--link-text Tutorials
+      li
+        a href="/docs"
+          span.main-nav--link-text Docs
+      li
+        a href="/community"
+          span.main-nav--link-text Community
+      li
+        a href="https://github.com/chef/inspec"
+          i.fa.fa-github-alt
+          span.main-nav--link-text Github
+      li
+        a.btn.try-demo href="#" Try the Demo
+      li
+        a.btn href="https://downloads.chef.io/inspec"
+          i.fa.fa-cloud-download
+          span.main-nav--link-text Download
diff --git a/www/source/stylesheets/_code.scss b/www/source/stylesheets/_code.scss
index db67a006a..7b2c0bce2 100644
--- a/www/source/stylesheets/_code.scss
+++ b/www/source/stylesheets/_code.scss
@@ -1,8 +1,4 @@
-.code-example {
-	padding       : $percent_sm;
-	border-radius : 7px;
-	background    : $color_heading;
-}
+//default
 
 code {
 	padding       : 2%;
@@ -11,6 +7,15 @@ code {
 	background    : $color_heading;
 }
 
+// Container for code example
+
+.code-example {
+	padding       : $percent_sm;
+	border-radius : 7px;
+	background    : $color_heading;
+}
+
+
 // Code Font Colors
 
 .code-demo {
diff --git a/www/source/stylesheets/_homepage.scss b/www/source/stylesheets/_homepage.scss
index 4cfb6a6e7..2579991e5 100644
--- a/www/source/stylesheets/_homepage.scss
+++ b/www/source/stylesheets/_homepage.scss
@@ -1,7 +1,7 @@
 // Hero Banner - Home Page
 
 header {
-	height : 440px;
+	height : 360px;
 }
 
 #particles-js {
@@ -20,28 +20,28 @@ header {
 	position         : absolute;
 	width            : 100%;
 	max-width        : 100%;
-	height           : 100%;
+	height           : 80%;
 	overflow         : hidden;
 	background-color : transparent;
 }
 
 .h-top {
 	// Container for homepage header art
-	height : 440px;
+	height : 360px;
 
 	img {
 		&:first-of-type {
 			// Grid Art
 			z-index  : 10;
 			position : absolute;
-			top      : 70px;
-			height   : 420px;
+			top      : 100px;
+			height   : 360px;
 		}
 
 		&:nth-child(3) {
 			// Diamond
 			height     : 220px;
-			margin-top : 132px;
+			margin-top : 85px;
 		}
 	}
 
@@ -49,7 +49,7 @@ header {
 		// Heading
 		z-index    : 10;
 		position   : absolute;
-		margin-top : 358px;
+		margin-top : 290px;
 	}
 }
 
@@ -86,7 +86,6 @@ img.ball:nth-child(3) {
 
 .child-h {
 	height     : 180px;
-	margin-top : 81px;
 	// plus header height
 }
 
diff --git a/www/source/stylesheets/_layout.scss b/www/source/stylesheets/_layout.scss
index 2a11add1e..be3b10fda 100644
--- a/www/source/stylesheets/_layout.scss
+++ b/www/source/stylesheets/_layout.scss
@@ -295,6 +295,7 @@ progress {
 	color              : $color_link;
 	border             : none;
 	background-color   : transparent;
+	z-index						 : 500;
 	/* Dimensions */
 	/* Reset the appearance */
 	/* Get rid of the default border in Firefox/Opera. */
@@ -328,6 +329,9 @@ progress[value]::progress-value {
 
 
 //search bar
+
+
+
 .searchbar{
 	display:flex;
 	align-items: center
diff --git a/www/source/stylesheets/_nav.scss b/www/source/stylesheets/_nav.scss
index 72e0955c7..c50554a1e 100644
--- a/www/source/stylesheets/_nav.scss
+++ b/www/source/stylesheets/_nav.scss
@@ -3,13 +3,9 @@ $side-nav-width: 200px;
 $top-nav-height: 100px;
 $side-nav-padding-large: 10px;
 $side-nav-padding-small: 30px;
-
 $nav-breakpoint: 730px;
 
-nav {
-  z-index: 200;
-  box-shadow: 0 0 4px rgba(151, 110, 229, 0.1);
-}
+
 
 @mixin nav-large {
   @media (min-width: #{$nav-breakpoint}) {
@@ -145,10 +141,7 @@ nav {
   @include nav-large {
     left: $side-nav-padding-large;
   }
-}
 
-.main-nav--link-text {
-  margin-left: 55px;
 
   @include nav-large {
     margin-left: 34px;
@@ -166,7 +159,6 @@ nav {
   }
 
   a {
-    margin-left: 1.6em;
     color: $color_gray;
   }
 
@@ -200,6 +192,24 @@ nav {
   }
 }
 
+//Hannah's Styles'
+
+nav {
+  z-index: 200;
+  box-shadow: 0 0 4px rgba(151, 110, 229, 0.1);
+  height: 80px;
+}
+
+nav ul {
+  margin-bottom: 0;
+}
+
+nav li {
+  display: inline-block;
+  font-weight: 400;
+  line-height: 80px;
+}
+
 a.main-nav--logo {
   display: inline-block;
   width: 130px;
diff --git a/www/source/stylesheets/_sidebar.scss b/www/source/stylesheets/_sidebar.scss
index 7fb6cd4d1..e48296c56 100644
--- a/www/source/stylesheets/_sidebar.scss
+++ b/www/source/stylesheets/_sidebar.scss
@@ -20,6 +20,7 @@ ul.main-sidebar--links li:last-child {
 }
 
 // THIS IS STILL OLD STUFF  - don't know what it is - hannah//
+
 .gcsc-branding,
 .gsc-adBlock {
   display : none !important;
diff --git a/www/source/stylesheets/_typography.scss b/www/source/stylesheets/_typography.scss
index 55abc33fa..f874e4829 100644
--- a/www/source/stylesheets/_typography.scss
+++ b/www/source/stylesheets/_typography.scss
@@ -3,6 +3,10 @@ h1 {
 	font-family : $heading-font;
 	font-size   : 2.25em;
 	font-weight : 300;
+  //mobile
+	@media only screen and (max-width: 40.063em) {
+		font-size   : 1.8em;
+		}
 }
 
 h2 {
@@ -10,6 +14,10 @@ h2 {
 	font-family : $heading-font;
 	font-size   : 1.75em;
 	font-weight : 300;
+  //mobile
+	@media only screen and (max-width: 40.063em) {
+		font-size   : 1.4em;
+		}
 }
 
 h3 {
@@ -17,6 +25,10 @@ h3 {
 	font-family : $heading-font;
 	font-size   : 1.25em;
 	font-weight : 300;
+  //mobile
+	@media only screen and (max-width: 40.063em) {
+		font-size   : 1.2em;
+		}
 }
 
 h4 {
@@ -25,6 +37,20 @@ h4 {
 	font-size   : 1.25em;
 	font-weight : 300;
 	line-height : 1.4em;
+  //mobile
+	@media only screen and (max-width: 40.063em) {
+		font-size   : 1.2em;
+		line-height : 1.6em;
+		}
+
+}
+
+p {
+	//mobile
+	@media only screen and (max-width: 40.063em) {
+		line-height : 1.6em;
+		}
+
 }
 
 li,
@@ -34,8 +60,10 @@ ul {
 	color       : $color_paragraph;
 	font-family : $main-font;
 	font-weight : 300;
+	list-style-type: none;
 }
 
+
 small {
 	@extend       %uppercase;
 	color       : $color_gray;