Improve navbar

src/index.html

@@ -35,6 +35,7 @@
                 <span class="brand__name">Fork</span>
                 <span class="brand__name brand__name--emph">IO</span>
             </div>
+            <button class="navbar__content__button navbar__content__button--phone rounded-button rounded-button--strong">Buy now</button>
             <button class="navbar__content__toggler navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
                     aria-controls="navbarNavDropdown" aria-expanded="true" aria-label="Toggle navigation">
                 <img src="img/navbar/sandwich.svg" alt="">
@@ -53,9 +54,11 @@
                     <li class="nav-item">
                         <a class="navbar__link nav-link" href="#">Support</a>
                     </li>
+                    <li class="nav-item">
+                        <button class="navbar__content__button navbar__content__button--desktop rounded-button rounded-button--strong">Buy now</button>
+                    </li>
                 </ul>
             </div>
-            <button class="navbar__content__button rounded-button rounded-button--strong">Buy now</button>
         </div>
     </div>
 

src/js/script.js

@@ -9,6 +9,7 @@
 
     if (scrollTop >= scrollThreshold) {
       $('.navbar').addClass('navbar--shrink');
+      $('#navbarNavDropdown').collapse('hide');
     } else {
       $('.navbar').removeClass('navbar--shrink');
     }
@@ -20,4 +21,8 @@
     autoplay: true,
     autoplaySpeed: 4000,
   });
+
+  $(window).resize(function() {
+    $('#navbarNavDropdown').collapse('hide');
+  });
 })(jQuery);

src/scss/_brand.scss

@@ -5,6 +5,9 @@
 .brand__logo {
   height: 45px;
   margin-right: 17px;
+  @media all and (max-width: $phone) {
+    height: 30px;
+  }
 }
 
 .brand__name {
@@ -15,6 +18,10 @@
   display: inline-flex;
   align-items: center;
 
+  @media all and (max-width: $phone) {
+    font-size: 15px;
+  }
+
   &--emph {
     color: $primary;
     font-style: normal;

src/scss/_navbar.scss

@@ -16,27 +16,60 @@ $shrinking-duration: 0.4s;
 
 .navbar {
   background-color: white;
+  min-width: 320px;
 }
 
 .navbar__content {
-  display: flex;
+  text-align: right;
 }
 
 .navbar__content__header {
-  order: 1;
 }
 
 .navbar__content__toggler {
-  order: 4;
   border: none;
+  &:focus {
+    outline: none;
+  }
 }
 
 .navbar__content__body {
-  order: 2;
 }
 
 .navbar__content__button {
-  order: 3;
+  @media all and (max-width: $phone) {
+    font-size: 12px;
+  }
+
+  @media all and (max-width: $desktop) {
+    &--desktop {
+      display: none;
+    }
+
+    &--phone {
+      display: inline;
+    }
+  }
+
+  @media all and (min-width: $desktop) {
+    &--desktop {
+      display: inline;
+    }
+
+    &--phone {
+      display: none;
+    }
+  }
+
+  @media all and (max-width: $small-phone) {
+    &--desktop {
+      display: inline;
+    }
+
+    &--phone {
+      display: none;
+    }
+  }
 }
 
 .navbar__link {
@@ -49,7 +82,7 @@ $shrinking-duration: 0.4s;
   margin: 0 20px;
 
   @media all and (max-width: $desktop-xl) {
-    margin: 0 5px;
+    margin: 0 2px;
   }
 }
 

src/scss/_variables.scss

@@ -20,6 +20,7 @@ $github-color: #f3f3f3;
 $twitter-color: #26a6d1;
 $facebook-color: #3b5998;
 
+$small-phone: 350px;
 $phone: 576px;
 $tablet: 768px;
 $desktop: 992px;