Revised Navbar Styles

SuyashLakhotia · SuyashLakhotia · commit d86a1d4a70b9 · 2016-05-29T19:25:15.000+07:00
diff --git a/dist/css/cards.css b/dist/css/cards.css
@@ -174,7 +174,7 @@ Navbar Styles
 }
 
 .navbar-default .navbar-img {
-  height: 50px;
+  height: 55px;
   padding: 10px 0 0 0;
   -webkit-transition: all 0.5s ease-in-out;
   -moz-transition: all 0.5s ease-in-out;
@@ -188,7 +188,10 @@ Navbar Styles
 }
 
 @media only screen and (min-width: 1024px) {
-  .navbar-default {
+  .navbar > .container-fluid {
+    padding-right: 30px;
+  }
+  .navbar-transition {
     padding: 20px 0 0 0;
     background-color: transparent;
     border-bottom: 0;
@@ -198,15 +201,15 @@ Navbar Styles
     -o-transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
     transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
   }
-  .navbar-default .container-fluid {
+  .navbar-transition .container-fluid {
     margin: 0 15px 0 15px;
   }
-  .navbar-default.top-nav-collapse {
+  .navbar-transition.navbar-collapse {
     padding: 0;
     background-color: #000;
     border-bottom: 1px solid rgba(255, 255, 255, 0.3);
   }
-  .navbar-default.top-nav-collapse .navbar-img {
+  .navbar-transition.navbar-collapse .navbar-img {
     height: 45px;
   }
 }
diff --git a/dist/index.html b/dist/index.html
@@ -23,7 +23,7 @@
 
 <body>
     <!-- Navbar -->
-    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
+    <nav class="navbar navbar-default navbar-fixed-top navbar-transition" role="navigation">
         <div class="container-fluid">
             <div class="navbar-header">
                 <button class="navbar-toggle" type="button" data-target="#navbarCollapse" data-toggle="collapse">
diff --git a/dist/js/main.js b/dist/js/main.js
@@ -14,10 +14,10 @@ $(function () {
 
     // Collapse navbar on scroll.
     $(window).scroll(function () {
-        if ($('.navbar-default').offset().top > 20) {
-            $('.navbar-default').addClass('top-nav-collapse');
+        if ($('.navbar-transition').offset().top > 20) {
+            $('.navbar-transition').addClass('navbar-collapse');
         } else {
-            $('.navbar-default').removeClass('top-nav-collapse');
+            $('.navbar-transition').removeClass('navbar-collapse');
         }
     });
 
diff --git a/src/index.html b/src/index.html
@@ -23,7 +23,7 @@
 
 <body>
     <!-- Navbar -->
-    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
+    <nav class="navbar navbar-default navbar-fixed-top navbar-transition" role="navigation">
         <div class="container-fluid">
             <div class="navbar-header">
                 <button class="navbar-toggle" type="button" data-target="#navbarCollapse" data-toggle="collapse">
diff --git a/src/js/main.js b/src/js/main.js
@@ -14,10 +14,10 @@ $(function () {
 
     // Collapse navbar on scroll.
     $(window).scroll(function () {
-        if ($('.navbar-default').offset().top > 20) {
-            $('.navbar-default').addClass('top-nav-collapse');
+        if ($('.navbar-transition').offset().top > 20) {
+            $('.navbar-transition').addClass('navbar-collapse');
         } else {
-            $('.navbar-default').removeClass('top-nav-collapse');
+            $('.navbar-transition').removeClass('navbar-collapse');
         }
     });
 
diff --git a/src/sass/layout/_navbar.scss b/src/sass/layout/_navbar.scss
@@ -63,7 +63,7 @@ Navbar Styles
     }
     
     .navbar-img {
-        height: 50px;
+        height: 55px;
         padding: 10px 0 0 0;
         @include transition(all .5s ease-in-out);
     }
@@ -74,7 +74,13 @@ Navbar Styles
 }
 
 @include large-screens-only {
-    .navbar-default {
+    .navbar {
+        > .container-fluid {
+            padding-right: 30px;
+        }
+    }
+
+    .navbar-transition {
         padding: 20px 0 0 0;
         background-color: transparent;
         border-bottom: 0;
@@ -85,7 +91,7 @@ Navbar Styles
         }
     }
     
-    .navbar-default.top-nav-collapse {
+    .navbar-transition.navbar-collapse {
         padding: 0;
         background-color: $nav-color;
         border-bottom: 1px solid rgba(255, 255, 255, .3);

Original file line number	Diff line number	Diff line change
`@@ -174,7 +174,7 @@ Navbar Styles`
`174`	`174`	`}`
`175`	`175`
`176`	`176`	`.navbar-default .navbar-img {`
`177`		`- height: 50px;`
	`177`	`+ height: 55px;`
`178`	`178`	`padding: 10px 0 0 0;`
`179`	`179`	`-webkit-transition: all 0.5s ease-in-out;`
`180`	`180`	`-moz-transition: all 0.5s ease-in-out;`
`@@ -188,7 +188,10 @@ Navbar Styles`
`188`	`188`	`}`
`189`	`189`
`190`	`190`	`@media only screen and (min-width: 1024px) {`
`191`		`- .navbar-default {`
	`191`	`+ .navbar > .container-fluid {`
	`192`	`+ padding-right: 30px;`
	`193`	`+ }`
	`194`	`+ .navbar-transition {`
`192`	`195`	`padding: 20px 0 0 0;`
`193`	`196`	`background-color: transparent;`
`194`	`197`	`border-bottom: 0;`
`@@ -198,15 +201,15 @@ Navbar Styles`
`198`	`201`	`-o-transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;`
`199`	`202`	`transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;`
`200`	`203`	`}`
`201`		`- .navbar-default .container-fluid {`
	`204`	`+ .navbar-transition .container-fluid {`
`202`	`205`	`margin: 0 15px 0 15px;`
`203`	`206`	`}`
`204`		`- .navbar-default.top-nav-collapse {`
	`207`	`+ .navbar-transition.navbar-collapse {`
`205`	`208`	`padding: 0;`
`206`	`209`	`background-color: #000;`
`207`	`210`	`border-bottom: 1px solid rgba(255, 255, 255, 0.3);`
`208`	`211`	`}`
`209`		`- .navbar-default.top-nav-collapse .navbar-img {`
	`212`	`+ .navbar-transition.navbar-collapse .navbar-img {`
`210`	`213`	`height: 45px;`
`211`	`214`	`}`
`212`	`215`	`}`
Original file line number	Diff line number	Diff line change
`@@ -63,7 +63,7 @@ Navbar Styles`
`63`	`63`	`}`
`64`	`64`
`65`	`65`	`.navbar-img {`
`66`		`- height: 50px;`
	`66`	`+ height: 55px;`
`67`	`67`	`padding: 10px 0 0 0;`
`68`	`68`	`@include transition(all .5s ease-in-out);`
`69`	`69`	`}`
`@@ -74,7 +74,13 @@ Navbar Styles`
`74`	`74`	`}`
`75`	`75`
`76`	`76`	`@include large-screens-only {`
`77`		`- .navbar-default {`
	`77`	`+ .navbar {`
	`78`	`+ > .container-fluid {`
	`79`	`+ padding-right: 30px;`
	`80`	`+ }`
	`81`	`+ }`
	`82`	`+`
	`83`	`+ .navbar-transition {`
`78`	`84`	`padding: 20px 0 0 0;`
`79`	`85`	`background-color: transparent;`
`80`	`86`	`border-bottom: 0;`
`@@ -85,7 +91,7 @@ Navbar Styles`
`85`	`91`	`}`
`86`	`92`	`}`
`87`	`93`
`88`		`- .navbar-default.top-nav-collapse {`
	`94`	`+ .navbar-transition.navbar-collapse {`
`89`	`95`	`padding: 0;`
`90`	`96`	`background-color: $nav-color;`
`91`	`97`	`border-bottom: 1px solid rgba(255, 255, 255, .3);`