diff --git a/frappe/public/scss/navbar.scss b/frappe/public/scss/navbar.scss
new file mode 100644
index 0000000000..241f16a521
--- /dev/null
+++ b/frappe/public/scss/navbar.scss
@@ -0,0 +1,57 @@
+.navbar-light {
+	border-bottom: 1px solid $border-color;
+}
+
+.navbar-light .navbar-nav .nav-link {
+	color: $gray-700;
+	font-size: $font-size-sm;
+	font-weight: 500;
+
+	&:hover,
+	&:focus, &.active {
+		color: $primary;
+	}
+}
+
+.navbar-brand {
+	img {
+		display: inline-block;
+		max-width: 150px;
+		max-height: 25px;
+	}
+}
+
+.navbar-cta {
+	margin-left: 1rem;
+}
+
+
+.navbar.bg-dark {
+	.dropdown-menu {
+		font-size: 0.75rem;
+		background-color: $dark;
+		border-radius: 0;
+	}
+
+	.nav-link {
+		white-space: nowrap;
+		color: $light;
+
+		&:hover {
+			color: $primary;
+		}
+	}
+
+	.nav-item {
+		padding: 0rem 1rem;
+	}
+
+	.dropdown-item {
+		color: $light;
+
+		&:hover {
+			background-color: $dark;
+			color: $primary;
+		}
+	}
+}
diff --git a/frappe/public/scss/website.scss b/frappe/public/scss/website.scss
index 0fc98e468f..b65966e102 100644
--- a/frappe/public/scss/website.scss
+++ b/frappe/public/scss/website.scss
@@ -13,6 +13,7 @@
 @import 'portal';
 @import 'search';
 @import 'doc';
+@import 'navbar';
 @import 'footer';
 
 .ql-editor.read-mode {
@@ -62,29 +63,6 @@
 	}
 }
 
-.navbar-light {
-	border-bottom: 1px solid $border-color;
-}
-
-.navbar-light .navbar-nav .nav-link {
-	color: $gray-700;
-	font-size: $font-size-sm;
-	font-weight: 500;
-
-	&:hover,
-	&:focus, &.active {
-		color: $primary;
-	}
-}
-
-.navbar-brand {
-	img {
-		display: inline-block;
-		max-width: 150px;
-		max-height: 25px;
-	}
-}
-
 .dropdown-menu {
 	padding: 0.25rem;
 }
@@ -93,36 +71,6 @@
 	border-radius: $dropdown-border-radius;
 }
 
-.navbar.bg-dark {
-	.dropdown-menu {
-		font-size: 0.75rem;
-		background-color: $dark;
-		border-radius: 0;
-	}
-
-	.nav-link {
-		white-space: nowrap;
-		color: $light;
-
-		&:hover {
-			color: $primary;
-		}
-	}
-
-	.nav-item {
-		padding: 0rem 1rem;
-	}
-
-	.dropdown-item {
-		color: $light;
-
-		&:hover {
-			background-color: $dark;
-			color: $primary;
-		}
-	}
-}
-
 .input-dark {
 	background-color: $dark;
 	border-color: darken($primary, 40%);
diff --git a/frappe/templates/includes/navbar/navbar_items.html b/frappe/templates/includes/navbar/navbar_items.html
index deffe54dbd..4e22060581 100644
--- a/frappe/templates/includes/navbar/navbar_items.html
+++ b/frappe/templates/includes/navbar/navbar_items.html
@@ -90,7 +90,7 @@
 
 </ul>
 {%- if call_to_action -%}
-<a class="btn btn-primary" href="{{ call_to_action_url | abs_url }}">
+<a class="btn btn-primary navbar-cta" href="{{ call_to_action_url | abs_url }}">
 	{{ call_to_action }}
 </a>
 {%- endif -%}