added navbar styles

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+

assets/css/navbar.css

@@ -35,20 +35,52 @@ left:0px;
 }
 @media (max-width: 700px) {
   .navbar-right{
-margin-right: 10px;
-  }
+    margin-right: 10px;
+      }
 
 
-label{
-  display: block;
-  margin-right: 0;
-   padding-left: 4vw;
+    label{
+      display: block;
+      margin-right: 0;
+      padding-left: 4vw;
 
-}
+    }
+
+    .navbar{
+      height: auto;
+    }
+
+    .navbar-left .active{
+      display: none;
+    }
+
+    .navbar-left{
+      margin-top: 45px;
+      margin-left: 4vw;
+      padding-bottom: 0%;
+    }
 
-    .navbar-left {
-        padding-left: 4vw;
-        display: none;
+    .navbar-left .nav{
+      flex-direction: column;
+      align-items: flex-start;
     }
 
+    .navbar-left .nav #vert-div{
+      display: none;
+    }
+
+    .navbar-left .nav #blog-title{
+      display: none;
+    }
+
+    .navbar-left .nav li{
+      margin-top: 4%;
+      margin-bottom: 4%;
+    }
+
+    .navbar-left .nav li a{
+      padding-bottom: 0%;
+    }
+
+
 }

assets/css/screen.css

@@ -40,6 +40,30 @@ body {
     background-size: cover;
     border-radius: 100%;
 }
+.logo a{
+    text-decoration: none;
+    color: #fff;
+}
+.logo h2{
+    margin: 0;
+    white-space: nowrap;
+}
+
+.nav li h4{
+    margin: 0;
+    max-width: 30h;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+}
+
+.nav li .vl{
+    border-left: 2px solid #fff;
+    height: 2rem;
+    margin-left: 1rem;
+}
+
 
 .hidden {
     visibility: hidden;
@@ -71,8 +95,8 @@ body {
 /* Centered content container blocks */
 .inner {
     margin: 0 auto;
-    max-width: 1040px;
-    width: 100%;
+    max-width: 90%;
+    width: 90%;
 }
 
 /* Usage:
@@ -256,22 +280,44 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
     margin: 0 0 0 -12px;
     padding: 0;
     list-style: none;
+    align-items: center;
 }
 
 .nav li {
-    display: block;
-    margin: 0;
     padding: 0;
     text-transform: uppercase;
 }
 
-.nav li a {
+.nav li,
+.nav li a,
+.nav li select {
     display: block;
     margin: 0;
+}
+.nav li a,
+.nav li select {
     padding: 10px 12px;
     color: #fff;
     opacity: 0.8;
 }
+.nav .logo a{
+    opacity: 1;
+}
+.nav li select{
+    padding: 4px 10px;
+    margin: 0px 12px 0px 12px;
+    border: 1px solid #fff;
+    background-color: transparent;
+}
+.nav li select:focus{
+    outline: none;
+    opacity: 1;
+}
+
+.nav li select option{
+    color: #000;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+}
 
 .nav li a:hover {
     text-decoration: none;

default.hbs

@@ -259,6 +259,13 @@ $('#scrollBtn').click(function() {      // When arrow is clicked
   </script>
   {{!-- Ghost outputs important scripts and data with this tag - it should always be the very last thing before the closing body tag --}}
   {{ghost_foot}}
+
+  <script>
+    function handleBurgerMenu(){
+      var element=document.getElementById("burger-menu");
+      element.classList.toggle("active");
+    }
+  </script>
 
 </body>