Navigation bar

index.css

@@ -1,8 +1,70 @@
 @import "https://fonts.googleapis.com/css?family=Shrikhand";
 @import "https://fonts.googleapis.com/css?family=Sansita+One";
-@import 'https://fonts.googleapis.com/css?family=Bungee+Inline';
+/* @import 'https://fonts.googleapis.com/css?family=Bungee+Inline'; */
 @import "https://fonts.googleapis.com/css?family=Mali";
-@import "https://fonts.googleapis.com/css?family=Unica+One";
+/* @import "https://fonts.googleapis.com/css?family=Unica+One"; */
+@import "https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap";
+
+* {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+}
+
+/* .header {
+	border-bottom: 1px solid #E2E8F0;
+} */
+
+.navbar {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 1rem 1.5rem;
+}
+
+.hamburger {
+	display: none;
+}
+
+.bar {
+	display: block;
+	width: 25px;
+	height: 3px;
+	margin: 5px auto;
+	-webkit-transition: all 0.3s ease-in-out;
+	transition: all 0.3s ease-in-out;
+	background-color: #101010;
+}
+
+.nav-menu {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.nav-item {
+	margin-left: 5rem;
+}
+
+.nav-link {
+	font-size: 1.6rem;
+	font-weight: 400;
+	color: #475569;
+}
+
+.nav-link:hover {
+	color: #482ff7;
+}
+
+.nav-logo {
+	font-size: 2.1rem;
+	font-weight: 500;
+	color: #482ff7;
+}
+
+li {
+	list-style-type: none;
+}
 
 html {
 	font-size: large !important;
@@ -16,46 +78,55 @@ a {
 	text-decoration: none;
 	color: #466c95;
 }
+
 a:visited {
 	text-decoration: none;
 	color: #466c95;
 }
+
 a:hover {
 	text-decoration: none;
 	color: #466c95;
 	/* background-color: #f6f49d; */
 }
+
 a:focus {
 	text-decoration: none;
 	color: #466c95;
 	background-color: #f6f49d;
 }
+
 a:hover,
 a:active {
 	text-decoration: none;
 	color: #466c95;
 }
+
 .description a {
 	background-color: #fffec4;
 	padding: 2.1px;
 }
+
 header .external-links {
 	margin-top: 1em;
 	margin-left: 0.42em;
 }
+
 header .external-links li {
 	display: inline;
 	font-size: 1.35em;
 	padding: 0.21em;
-	font-family: 'Unica One';
+	font-family: 'Open Sans', sans-serif;
 }
+
 h1 {
 	font-family: 'Shrikhand';
 	font-size: 4.2em;
 	margin: 0;
 	max-width: 642px;
 	color: rgb(218, 156, 253);
 }
+
 h2 {
 	font-family: 'Sansita One';
 	font-size: 3.642em;
@@ -83,6 +154,7 @@ h3 {
 main {
 	min-height: 90vh;
 }
+
 /* 
 .headshot {
 	border-radius: 50%;
@@ -105,7 +177,10 @@ main {
 	-webkit-align-items: center;
 	-ms-flex-align: center;
 	align-items: center;
+	/* For on top of Dixie Korley, Data Analyst*/ 
+	margin-top: 7%;
 }
+
 .center-of-screen .description {
 	font-family: 'Mali';
 	font-weight: 742;
@@ -114,25 +189,91 @@ main {
 	max-width: 560px;
 	text-align: left;
 	line-height: 2em;
+	/*For under the scroll dots*/
+	margin-bottom: 5em;
 }
+
 .description .slick-dots li button:before {
 	color: rgb(218, 156, 253);
+
 }
+
 .description .slick-dots li button {
 	color: rgb(218, 156, 253);
 }
-@media (max-width: 584px) {
+
+@media only screen and (max-width: 768px) {
 	h1 {
 		font-size: 2.5em;
 	}
+
 	h2 {
 		font-size: 2.142em;
 	}
+
 	ul {
 		margin-bottom: 25%;
 	}
+
+	.center-of-screen {
+		padding-top: 2em;
+	}
+
 	.center-of-screen .description {
+		/*For the width of the body page*/
+		/* max-width: 330px; */
 		max-width: 330px;
 	}
 
+
+
+.nav-menu {
+	position: fixed;
+	left: -100%;
+	top: 5rem;
+	flex-direction: column;
+	background-color: #fff;
+	width: 100%;
+	border-radius: 10px;
+	text-align: center;
+	transition: 0.3s;
+	box-shadow:
+	0 10px 27px rgba(0, 0, 0, 0.05);
+	/* Attempting to fix background issue*/
+	z-index: 10;
+}
+
+
+
+.nav-menu.active {
+	left: 0;
+
 }
+
+.nav-item {
+	margin: 2.5rem 0;
+}
+
+
+.hamburger {
+	display: block;
+	cursor: pointer;
+	right: 0;
+
+}
+
+
+.hamburger.active .bar:nth-child(2) {
+	opacity: 0;
+}
+
+.hamburger.active .bar:nth-child(1) {
+	transform: translateY(8px) rotate(45deg);
+}
+
+.hamburger.active .bar:nth-child(3) {
+	transform: translateY(-8px) rotate(-45deg);
+}
+
+}
+