fixed header, right navbar and responsive

app/assets/scss/base/_mixins.scss

@@ -8,4 +8,12 @@
 
 @mixin atLarge {
 	@media (min-width: 1200px) { @content };
+}
+
+@mixin clearfix {
+	&::after{
+		content: "";
+		clear: both;
+		display: table;
+	}
 }

app/assets/scss/modules/_primary-nav.scss

@@ -0,0 +1,61 @@
+.primary-nav{
+	padding-top: 10px;
+	
+	@include atMedium(){
+		padding-top: 0;
+	}
+
+	&--pull-right{
+		@include atMedium(){
+			float: right;
+		}
+	}
+
+	ul {
+		margin: 0;
+		padding: 0;
+
+		@include clearfix();
+	}
+
+	li{
+		list-style: none;
+		display: inline-block;
+		padding-right: 7px;
+
+		@include atMedium(){
+			float: left;
+			display: block;
+			padding-right: 20px;
+
+		}
+	}
+
+	li:last-child {
+		padding-right: 0;
+
+		@include atMedium(){
+			padding-right: 20px;
+		}
+	}
+
+	a{
+		color:  #000;
+		font-weight: 300;
+		text-decoration: none;
+		display: block;
+		padding: 5px 8px;
+		font-size: .8rem;
+		background:rgba(blue, .5);
+
+		@include atMedium(){
+			background:transparent;
+			font-size: 1rem;
+			padding: 12px 0;
+
+			&.is-current-link {
+				color: #fabb69;
+			}
+		}
+	}
+}

app/assets/scss/modules/_site-header.scss

@@ -0,0 +1,50 @@
+.site-header{
+	padding: 10px 0;
+	position: absolute;
+	width: 100%;
+	z-index: 2;
+	transition: background-color .3s ease-out;
+	
+	@include atMedium(){
+		position: fixed;
+		background-color: #cdf691;
+	}
+
+	&__btn-container{
+		@include atMedium(){
+			float: right;
+		}
+	}
+
+	&__menu-content{
+		opacity: 0;
+		transform: scale(1.2);
+		transtion: all .3s ease-out;
+		position: relative;
+		z-index: -10;
+		padding-top: 90px;
+		text-align: center;
+
+		@include atMedium(){
+			opacity: 1;
+			z-index: 1;
+			padding-top: 0;
+			transform: scale(1); 
+		}
+	}
+
+	&__logo{
+		position: absolute;
+		top: 0;
+		left: 50%;
+		transform-origin: 50% 0%;
+		transform: translateX(-50%) scale(.8);
+		transition: transform .3s ease-out;
+
+		@include atMedium(){
+			left: auto;
+			transform: translateX(0);
+		}
+	}
+
+}

app/assets/scss/modules/_wrapper.scss

@@ -0,0 +1,12 @@
+.wrapper{
+	overflow: hidden;
+	padding-left: 18px;
+	padding-right: 18px;
+	max-width: 1236px;
+	margin-left: auto;
+	margin-right: auto;
+
+	&--medium{
+		max-width: 976px;
+	}
+}

app/assets/scss/style.scss

@@ -2,5 +2,9 @@
 @import './base/variables';
 @import './base/global';
 @import './base/mixins';
+@import './modules/site-header';
+@import './modules/primary-nav';
+@import './modules/wrapper';
+