diff --git a/core/themes/bartik/bartik.libraries.yml b/core/themes/bartik/bartik.libraries.yml
index 9c1a33c..7accf0a 100644
--- a/core/themes/bartik/bartik.libraries.yml
+++ b/core/themes/bartik/bartik.libraries.yml
@@ -30,6 +30,7 @@ global-styling:
       css/components/page-title.css: {}
       css/components/pager.css: {}
       css/components/panel.css: {}
+      css/components/primary-menu--toggle.css: {}
       css/components/primary-menu.css: {}
       css/components/search.css: {}
       css/components/search-results.css: {}
diff --git a/core/themes/bartik/css/colors.css b/core/themes/bartik/css/colors.css
index d56f24b..d3b19c0 100644
--- a/core/themes/bartik/css/colors.css
+++ b/core/themes/bartik/css/colors.css
@@ -6,8 +6,8 @@ body {
 }
 #page,
 #main-wrapper,
-.region-primary-menu .menu-item a.is-active,
-.region-primary-menu .menu-item--active-trail a {
+.primary-menu .menu-item a.is-active,
+.primary-menu .menu-item--active-trail a {
   background: #ffffff;
 }
 .tabs ul.primary li a.is-active {
diff --git a/core/themes/bartik/css/components/primary-menu--toggle.css b/core/themes/bartik/css/components/primary-menu--toggle.css
new file mode 100644
index 0000000..e95eecc
--- /dev/null
+++ b/core/themes/bartik/css/components/primary-menu--toggle.css
@@ -0,0 +1,68 @@
+/* ---------- Primary Menu Toggle ----------- */
+/* Hide the toggle by default. */
+.menu-toggle,
+.menu-toggle-target {
+  display: none;
+}
+/* Unhide it for the primary menu. */
+.primary-menu .menu-toggle-target {
+  display: inherit;
+  position: fixed;
+  top: 0;
+}
+.primary-menu .menu-toggle {
+  display: none;
+}
+body:not(:target) .primary-menu .menu-toggle {
+  color: #333;
+  background: #ccc;
+  background: rgba(255, 255, 255, 0.7);
+  float: none;
+  font-size: 0.929em;
+  display: block;
+  text-decoration: none;
+  text-shadow: 0 1px #eee;
+  padding: 0.9em 10px 0.9em 10px;
+  z-index: 1000;
+}
+body:not(:target) .primary-menu .menu-toggle:after {
+  content:"";
+  background: url(../../../../misc/icons/ffffff/hamburger.svg) no-repeat;
+  background-size: contain;
+  width: 22px;
+  height: 22px;
+  display: inline-block;
+  position: absolute;
+  right: 10px; /* LTR */
+}
+[dir="rtl"] body:not(:target) .primary-menu .menu-toggle:after {
+  right: initial;
+  left: 10px;
+}
+body:not(:target) .primary-menu .menu-toggle-target-show:target ~ .menu-toggle,
+body:not(:target) .primary-menu .menu-toggle--hide {
+  display: none;
+}
+body:not(:target) .primary-menu .menu-toggle-target-show:target ~ .menu-toggle--hide {
+  display: block;
+}
+
+body:not(:target) .primary-menu .menu-item {
+  height: 0;
+  overflow: hidden;
+}
+body:not(:target) .primary-menu .menu-toggle-target-show:target ~ .menu .menu-item {
+  height: auto;
+  overflow: visible;
+}
+
+@media all and (min-width: 461px) and (max-width: 900px) {
+  body:not(:target) .primary-menu .menu-toggle {
+    display: none;
+  }
+}
+@media all and (min-width: 901px) {
+  body:not(:target) .primary-menu .menu-toggle {
+    display: none;
+  }
+}
diff --git a/core/themes/bartik/css/components/primary-menu.css b/core/themes/bartik/css/components/primary-menu.css
index 8b68e85..a353d10 100644
--- a/core/themes/bartik/css/components/primary-menu.css
+++ b/core/themes/bartik/css/components/primary-menu.css
@@ -1,18 +1,15 @@
 /* --------------- Primary Menu ------------ */
 
-.region-primary-menu {
-  clear: both;
-}
-.region-primary-menu .menu {
+.primary-menu .menu {
   font-size: 0.929em;
   margin: 0 5px;
   padding: 0;
   text-align: left; /* LTR */
 }
-[dir="rtl"] .region-primary-menu .menu {
+[dir="rtl"] .primary-menu .menu {
   text-align: right;
 }
-.region-primary-menu .menu-item {
+.primary-menu .menu-item {
   float: none;
   list-style: none;
   margin: 0;
@@ -20,7 +17,7 @@
   height: auto;
   width: 100%;
 }
-.region-primary-menu .menu a {
+.primary-menu .menu a {
   color: #333;
   background: #ccc;
   background: rgba(255, 255, 255, 0.7);
@@ -32,91 +29,33 @@
   margin: 4px 0;
   padding: 0.9em 0 0.9em 10px; /* LTR */
 }
-[dir="rtl"] .region-primary-menu .menu a {
+[dir="rtl"] .primary-menu .menu a {
   padding: 0.9em 10px 0.9em 0;
 }
-.region-primary-menu .menu a:hover,
-.region-primary-menu .menu a:focus {
+.primary-menu .menu a:hover,
+.primary-menu .menu a:focus {
   background: #f6f6f2;
   background: rgba(255, 255, 255, 0.95);
 }
-.region-primary-menu .menu a:active {
+.primary-menu .menu a:active {
   background: #b3b3b3;
   background: rgba(255, 255, 255, 1);
 }
-.region-primary-menu .menu-item a.is-active {
+.primary-menu .menu-item a.is-active {
   border-bottom: none;
 }
 
-/* ---------- Primary Menu Toggle ----------- */
-/* Hide the toggle by default. */
-.menu-toggle,
-.menu-toggle-target {
-  display: none;
-}
-/* Unhide it for the primary menu. */
-.region-primary-menu .menu-toggle-target {
-  display: inherit;
-  position: fixed;
-  top: 0;
-}
-.region-primary-menu .menu-toggle {
-  display: none;
-}
-body:not(:target) .region-primary-menu .menu-toggle {
-  color: #333;
-  background: #ccc;
-  background: rgba(255, 255, 255, 0.7);
-  float: none;
-  font-size: 0.929em;
-  display: block;
-  text-decoration: none;
-  text-shadow: 0 1px #eee;
-  padding: 0.9em 10px 0.9em 10px;
-  z-index: 1000;
-}
-body:not(:target) .region-primary-menu .menu-toggle:after {
-  content:"";
-  background: url(../../../../misc/icons/ffffff/hamburger.svg) no-repeat;
-  background-size: contain;
-  width: 22px;
-  height: 22px;
-  display: inline-block;
-  position: absolute;
-  right: 10px; /* LTR */
-}
-[dir="rtl"] body:not(:target) .region-primary-menu .menu-toggle:after {
-  right: initial;
-  left: 10px;
-}
-body:not(:target) .region-primary-menu .menu-toggle-target-show:target ~ .menu-toggle,
-body:not(:target) .region-primary-menu .menu-toggle--hide {
-  display: none;
-}
-body:not(:target) .region-primary-menu .menu-toggle-target-show:target ~ .menu-toggle--hide {
-  display: block;
-}
-
-body:not(:target) .region-primary-menu .menu-item {
-  height: 0;
-  overflow: hidden;
-}
-body:not(:target) .region-primary-menu .menu-toggle-target-show:target ~ .menu .menu-item {
-  height: auto;
-  overflow: visible;
-}
-
 /**
  * Media queries for primary menu.
  */
 @media all and (min-width: 461px) and (max-width: 900px) {
-  .region-primary-menu .menu {
+  .primary-menu .menu {
     margin: 0 5px;
     padding: 0;
     text-align: center;
   }
-  .region-primary-menu .menu-item,
-  body:not(:target) .region-primary-menu .menu-item {
+  .primary-menu .menu-item,
+  body:not(:target) .primary-menu .menu-item {
     float: left; /* LTR */
     margin-right: 5px; /* LTR */
     padding: 0;
@@ -125,39 +64,35 @@ body:not(:target) .region-primary-menu .menu-toggle-target-show:target ~ .menu .
     height: auto;
     overflow: visible;
   }
-  [dir="rtl"] .region-primary-menu .menu-item,
-  [dir="rtl"] body:not(:target) .region-primary-menu .menu-item {
+  [dir="rtl"] .primary-menu .menu-item,
+  [dir="rtl"] body:not(:target) .primary-menu .menu-item {
     float: right;
     margin-left: 5px;
     margin-right: 0;
   }
-  .region-primary-menu .menu-item:nth-child(3n) {
+  .primary-menu .menu-item:nth-child(3n) {
     margin-right: -5px; /* LTR */
   }
-  [dir="rtl"] .region-primary-menu .menu-item:nth-child(3n) {
+  [dir="rtl"] .primary-menu .menu-item:nth-child(3n) {
     margin-left: -5px;
     margin-right: 0;
   }
-  .region-primary-menu .menu a {
+  .primary-menu .menu a {
     float: none;
     display: block;
     border-radius: 8px;
     margin-bottom: 5px;
     padding: 0.9em 5px;
   }
-  body:not(:target) .region-primary-menu .menu-toggle {
-    display: none;
-  }
 }
 
 @media all and (min-width: 901px) {
-  .region-primary-menu .block-menu .menu {
+  .primary-menu .block-menu .menu {
     font-size: 0.929em;
     margin: 0;
-    padding: 0 15px;
   }
-  .region-primary-menu .menu-item,
-  body:not(:target) .region-primary-menu .menu-item {
+  .primary-menu .menu-item,
+  body:not(:target) .primary-menu .menu-item {
     float: left; /* LTR */
     list-style: none;
     padding: 0 1px;
@@ -166,27 +101,19 @@ body:not(:target) .region-primary-menu .menu-toggle-target-show:target ~ .menu .
     height: auto;
     overflow: visible;
   }
-  [dir="rtl"] .region-primary-menu .menu-item,
-  [dir="rtl"] body:not(:target) .region-primary-menu .menu-item {
+  [dir="rtl"] .primary-menu .menu-item,
+  [dir="rtl"] body:not(:target) .primary-menu .menu-item {
     float: right;
   }
-  .region-primary-menu .menu a {
+  .primary-menu .menu a {
     float: left; /* LTR */
     padding: 0.7em 0.8em;
     margin-bottom: 0;
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
   }
-  [dir="rtl"] .region-primary-menu .menu a {
+  [dir="rtl"] .primary-menu .menu a {
     float: right;
     padding: 0.7em 0.8em;
   }
-  .featured .region-primary-menu .menu-item a:active,
-  .featured .region-primary-menu .menu-item a.is-active {
-    background: #f0f0f0;
-    background: rgba(240, 240, 240, 1.0);
-  }
-  body:not(:target) .region-primary-menu .menu-toggle {
-    display: none;
-  }
 }
diff --git a/core/themes/bartik/css/layout.css b/core/themes/bartik/css/layout.css
index fe45583..8d13bf6 100644
--- a/core/themes/bartik/css/layout.css
+++ b/core/themes/bartik/css/layout.css
@@ -28,3 +28,11 @@
   margin-top: 20px;
   margin-bottom: 40px;
 }
+
+/**
+ * Primary menu region
+ */
+.layout-primary-menu {
+  clear: both;
+  padding: 0 15px;
+}
diff --git a/core/themes/bartik/templates/region--primary-menu.html.twig b/core/themes/bartik/templates/region--primary-menu.html.twig
new file mode 100644
index 0000000..84e6345
--- /dev/null
+++ b/core/themes/bartik/templates/region--primary-menu.html.twig
@@ -0,0 +1,15 @@
+{% extends "@classy/layout/region.html.twig" %}
+{#
+/**
+ * @file
+ * Theme override to display a region.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the region div.
+ * - region: The name of the region variable as defined in the theme's
+ *   .info.yml file.
+ *
+ * @see template_preprocess_region()
+ */
+#}
+{% set attributes = attributes.addClass('primary-menu', 'layout-' ~ region|clean_class) %}
\ No newline at end of file