diff --git a/core/themes/bartik/css/colors.css b/core/themes/bartik/css/colors.css
index e5bc04b2d5..81cb8bde39 100644
--- a/core/themes/bartik/css/colors.css
+++ b/core/themes/bartik/css/colors.css
@@ -50,8 +50,8 @@ a:active,
 .region-header .site-branding,
 .region-header .site-branding__text a,
 .region-header .site-branding a,
-.region-secondary-menu .menu-item a,
-.region-secondary-menu .menu-item a.is-active {
+.secondary-menu .menu-item a,
+.secondary-menu .menu-item a.is-active {
   color: #fffeff;
 }
 
diff --git a/core/themes/bartik/css/components/secondary-menu.css b/core/themes/bartik/css/components/secondary-menu.css
index c099dc73ed..6111e3bf75 100644
--- a/core/themes/bartik/css/components/secondary-menu.css
+++ b/core/themes/bartik/css/components/secondary-menu.css
@@ -1,26 +1,34 @@
-/* --------------- Secondary Menu ------------ */
+/**
+ * @file
+ * Secondary Menu.
+ */
 
-.region-secondary-menu .menu {
+.secondary-menu .menu {
   text-align: right; /* LTR */
   font-size: 0.929em;
-  margin: 0 10px;
   padding: 0;
 }
-[dir="rtl"] .region-secondary-menu .menu {
+.secondary-menu .menu,
+.layout-secondary-menu {
+  margin: 0 15px;
+}
+[dir="rtl"] .secondary-menu .menu {
   text-align: left;
   margin-right: 10px; /* required to win over specificity of [dir="rtl"] ul.menu */
   margin-left: 10px;
 }
-.region-secondary-menu .menu-item {
-  margin: 0;
+.secondary-menu .menu-item {
   padding: 0;
   display: inline;
 }
-.region-secondary-menu .menu a {
+.secondary-menu .menu a {
   display: inline-block;
   padding: 0.8em;
 }
-.region-secondary-menu .menu a:hover,
-.region-secondary-menu .menu a:focus {
+.secondary-menu .menu a:hover,
+.secondary-menu .menu a:focus {
   text-decoration: underline;
 }
+.secondary-menu ul.menu a.is-active {
+  color: #fffeff;
+}