Add navbar styles

css/styles.css

@@ -12,3 +12,177 @@ body {
   text-align: left;
   color: #495568;
 }
+
+
+/* NAVBAR STYLING BELOW */
+
+/* Navbar Style */
+.navbar {
+  overflow: hidden;
+  background-color: #6b98f2;
+  font-family: sans-serif;
+  padding: 0px 0px 0px 0px;
+  margin: 0;
+  width: 100%;
+ }
+ 
+ /* Navbar Title & Logo */
+ .navbar img {
+   float: left;
+   text-align: center;
+   padding: 15px 15px;
+   font-size: 19px;
+ }
+ 
+ /* Navbar Links Style */
+ .navbar a {
+  float: left;
+  display: block;
+  color: #f2f2f2;
+  text-align: center;
+  padding: 17px 15px;
+  font-size: 18px;
+  font-weight: 600;
+  text-decoration: none;
+ }
+ 
+ /* Hide 'Home' link by default, prefer icon */
+ .mobile {
+   display: none;
+ }
+ 
+ /* Navbar Logo Link Style */
+ .navbar a.logo {
+  float: left;
+  display: block;
+  color: #f2f2f2;
+  padding: 0px 0px;
+ }
+ 
+ /* Navbar Links Style */
+ .navbar i {
+  float: right;
+  display: block;
+  color: #f2f2f2;
+  text-align: center;
+  padding: 17px 15px;
+  font-size: 18px;
+  font-weight: 600;
+  text-decoration: none;
+ }
+ 
+ /* Navbar Hover Style */
+ .navbar a:hover, .dropdown:hover {
+  background-color: #115bf0;
+ }
+ 
+ /* Droplist Hover Style */
+ .droplist a:hover {
+   background-color: #00349c;
+ }
+ 
+ /* Navbar Active Class */
+ .navbar a.active, .navbar img.active, .navbar button.active {
+  background-color: #3075ff;
+ }
+ 
+ /* Hide Hamburger Icon */
+ .navbar .icon {
+   display: none;
+ }
+ 
+ /* Dropdown Container Class */
+ .dropdown {
+   float: left;
+   overflow: hidden;
+ }
+ 
+ /* Dropdown Button Styling */
+ .dropdown .dropbutton {
+   font-size: 18px;
+   border: none;
+   outline: none;
+   color: white;
+   padding: 17px 17px;
+   background-color: inherit;
+   font-family: inherit;
+   font-weight: 600;
+   margin: 0;
+ }
+ 
+ /* Dropdown Content Styling */
+ .droplist {
+   display: none;
+   position: absolute;
+   background-color: #115bf0;
+   min-width: 160px;
+   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+   z-index: 1;
+ }
+ 
+ /* Style the links inside the dropdown */
+ .droplist a {
+   float: none;
+   color: white;
+   padding: 12px 16px;
+   text-decoration: none;
+   display: block;
+   text-align: left;
+ }
+ 
+ /* Show the dropdown menu when the user moves the mouse over the dropdown button */
+ .dropdown:hover .droplist {
+   display: block;
+ }
+ 
+ /* When the screen is less than 600 pixels wide, hide all links and replace 'Home' icon with link. Show the link that contains should open and close the topnav (.icon) */
+ @media screen and (max-width: 600px) {
+   .navbar a, .navbar img, .dropdown .dropbutton {
+     display: none;
+   }
+ 
+   .mobile {
+     display: block
+   }
+ 
+   .navbar a.icon {
+     float: right;
+     display: block;
+   }
+   .navbar i {
+     float: left;
+   }
+ 
+   /* Navbar Active Class */
+   .navbar a.active, .navbar img.active, .navbar button.active {
+    background-color: #3075ff;
+   }
+ 
+ }
+ 
+ /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
+ @media screen and (max-width: 600px) {
+   .navbar.responsive {position: relative;}
+   .navbar.responsive a.icon {
+     position: absolute;
+     right: 0;
+     top: 0;
+   }
+   .navbar.responsive a {
+     float: none;
+     display: block;
+     text-align: left;
+   }
+ 
+   .navbar.responsive i {
+     display: none
+   }
+ 
+   .navbar.responsive .dropdown {float: none;}
+   .navbar.responsive .droplist {position: relative;}
+   .navbar.responsive .dropdown .dropbutton {
+     display: block;
+     width: 100%;
+     text-align: left;
+   }
+ }