diff --git a/core/themes/bartik/css/colors.css b/core/themes/bartik/css/colors.css
index 6c2081f5dc..58fd8fd308 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: #fff;
 }
 .tabs ul.primary li a.is-active {
diff --git a/core/themes/bartik/css/components/primary-menu.css b/core/themes/bartik/css/components/primary-menu.css
index 3847df30af..0bb5841e84 100644
--- a/core/themes/bartik/css/components/primary-menu.css
+++ b/core/themes/bartik/css/components/primary-menu.css
@@ -1,30 +1,84 @@
-/* --------------- Primary Menu ------------ */
+/**
+ * @file
+ * Visual styles for menus in Bartik's Primary Menu region.
+ */
 
-.region-primary-menu {
-  clear: both;
-}
-.region-primary-menu .menu {
+/* Style the menu list */
+.primary-menu .menu {
   margin: 0 5px;
   padding: 0;
   text-align: left; /* LTR */
   font-size: 0.929em;
 }
-[dir="rtl"] .region-primary-menu .menu {
+[dir="rtl"] .primary-menu .menu {
   margin-right: 5px; /* This is required to win over specificity of [dir="rtl"] ul.menu */
   margin-left: 5px; /* This is required to win over specificity of [dir="rtl"] ul.menu */
   text-align: right;
 }
-.region-primary-menu .menu-item {
-  float: none;
+
+@media all and (min-width: 461px) and (max-width: 900px) {
+  .primary-menu .menu {
+    text-align: center;
+  }
+}
+
+@media all and (min-width: 901px) {
+  .primary-menu .menu {
+    margin: 0;
+    padding: 0 15px;
+  }
+}
+
+/* Style list elements */
+.primary-menu .menu-item {
+  overflow: hidden;
   width: 100%;
-  height: auto;
+  height: 0;
   margin: 0;
   padding: 0;
   list-style: none;
 }
-.region-primary-menu .menu a {
+
+@media all and (min-width: 461px) and (max-width: 900px) {
+  .primary-menu .menu-item {
+    overflow: visible;
+    display: inline-block;
+    float: left; /* LTR */
+    width: 32.75%;
+    height: auto;
+    margin-right: 5px; /* LTR */
+  }
+  [dir="rtl"] .primary-menu .menu-item {
+    float: right;
+    margin-right: 0;
+    margin-left: 5px;
+  }
+  .primary-menu .menu-item:nth-child(3n) {
+    margin-right: -5px; /* LTR */
+  }
+  [dir="rtl"] .primary-menu .menu-item:nth-child(3n) {
+    margin-right: 0;
+    margin-left: -5px;
+  }
+}
+
+@media all and (min-width: 901px) {
+  .primary-menu .menu-item {
+    overflow: visible;
+    float: left; /* LTR */
+    width: auto;
+    height: auto;
+    margin: 0 1px;
+    padding: 0 1px;
+  }
+  [dir="rtl"] .primary-menu .menu-item {
+    float: right;
+  }
+}
+
+/* Style links in menu list */
+.primary-menu .menu a {
   display: block;
-  float: none;
   margin: 4px 0;
   padding: 0.9em 0 0.9em 10px; /* LTR */
   text-decoration: none;
@@ -34,38 +88,57 @@
   background: rgba(255, 255, 255, 0.7);
   text-shadow: 0 1px #eee;
 }
-[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 ----------- */
+@media all and (min-width: 461px) and (max-width: 900px) {
+  .primary-menu .menu a {
+    display: block;
+    margin-bottom: 5px;
+    padding: 0.9em 5px;
+    border-radius: 8px;
+  }
+}
+
+@media all and (min-width: 901px) {
+  .primary-menu .menu a {
+    margin-bottom: 0;
+    padding: 0.7em 0.8em;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+}
+
+/**
+ * Primary Menu Toggle
+ * Hides or displays the menu items using
+ * only CSS.
+ */
 /* Hide the toggle by default. */
 .menu-toggle,
 .menu-toggle-target {
   display: none;
 }
 /* Unhide it for the primary menu. */
-.region-primary-menu .menu-toggle-target {
+.primary-menu .menu-toggle-target {
   position: fixed;
   top: 0;
   display: inherit;
 }
-.region-primary-menu .menu-toggle {
-  display: none;
-}
-body:not(:target) .region-primary-menu .menu-toggle {
+.primary-menu .menu-toggle {
   z-index: 1000;
   display: block;
   float: none;
@@ -77,136 +150,39 @@ body:not(:target) .region-primary-menu .menu-toggle {
   text-shadow: 0 1px #eee;
   font-size: 0.929em;
 }
-body:not(:target) .region-primary-menu .menu-toggle:after {
+.primary-menu .menu-toggle:after {
   position: absolute;
   right: 10px; /* LTR */
   display: inline-block;
   width: 22px;
   height: 22px;
   content: "";
-  background: url(../../../../misc/icons/ffffff/hamburger.svg) no-repeat;
-  background-size: contain;
+  background: url(../../../../misc/icons/ffffff/hamburger.svg) 0 0 / contain no-repeat;
 }
-[dir="rtl"] body:not(:target) .region-primary-menu .menu-toggle:after {
+[dir="rtl"] .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 {
+.primary-menu .menu-toggle-target-show:target ~ .menu-toggle,
+.primary-menu .menu-toggle--hide {
   display: none;
 }
-body:not(:target) .region-primary-menu .menu-toggle-target-show:target ~ .menu-toggle--hide {
+.primary-menu .menu-toggle-target-show:target ~ .menu-toggle--hide {
   display: block;
 }
 
-body:not(:target) .region-primary-menu .menu-item {
-  overflow: hidden;
-  height: 0;
-}
-body:not(:target) .region-primary-menu .menu-toggle-target-show:target ~ .menu .menu-item {
+.primary-menu .menu-toggle-target-show:target ~ .menu .menu-item {
   overflow: visible;
   height: auto;
 }
 
-/**
- * Media queries for primary menu.
- */
-@media all and (min-width: 461px) and (max-width: 900px) {
-  .region-primary-menu .menu {
-    margin: 0 5px;
-    padding: 0;
-    text-align: center;
-  }
-  /* This is required to win over specificity of the global [dir="rtl"] .region-primary-menu .menu */
-  [dir="rtl"] .region-primary-menu .menu {
-    text-align: center;
-  }
-  .region-primary-menu .menu-item,
-  body:not(:target) .region-primary-menu .menu-item {
-    display: inline-block;
-    float: left; /* LTR */
-    overflow: visible;
-    width: 32.75%;
-    height: auto;
-    margin-right: 5px; /* LTR */
-    padding: 0;
-  }
-  [dir="rtl"] .region-primary-menu .menu-item,
-  [dir="rtl"] body:not(:target) .region-primary-menu .menu-item {
-    float: right;
-    margin-right: 0;
-    margin-left: 5px;
-  }
-  .region-primary-menu .menu-item:nth-child(3n) {
-    margin-right: -5px; /* LTR */
-  }
-  [dir="rtl"] .region-primary-menu .menu-item:nth-child(3n) {
-    margin-right: 0;
-    margin-left: -5px;
-  }
-  .region-primary-menu .menu a {
-    display: block;
-    float: none;
-    margin-bottom: 5px;
-    padding: 0.9em 5px;
-    border-radius: 8px;
-  }
-  /* This is required to win over specificity of the global [dir="rtl"] .region-primary-menu .menu a */
-  [dir="rtl"] .region-primary-menu .menu a {
-    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 {
-    margin: 0;
-    padding: 0 15px;
-    font-size: 0.929em;
-  }
-  .region-primary-menu .menu-item,
-  body:not(:target) .region-primary-menu .menu-item {
-    float: left; /* LTR */
-    overflow: visible;
-    width: auto;
-    height: auto;
-    margin: 0 1px;
-    padding: 0 1px;
-    list-style: none;
-  }
-  [dir="rtl"] .region-primary-menu .menu-item,
-  [dir="rtl"] body:not(:target) .region-primary-menu .menu-item {
-    float: right;
-  }
-  .region-primary-menu .menu a {
-    float: left; /* LTR */
-    margin-bottom: 0;
-    padding: 0.7em 0.8em;
-    border-bottom-right-radius: 0;
-    border-bottom-left-radius: 0;
-  }
-  [dir="rtl"] .region-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);
-  }
-  body:not(:target) .region-primary-menu .menu-toggle {
-    display: none;
-  }
-}
-
 /**
  * Ensures that the open mobile menu hides when the screen dimensions become
  * 461px or wider.
  */
 @media all and (min-width: 461px) {
-  body:not(:target) .region-primary-menu .menu-toggle-target-show:target ~ .menu-toggle--hide {
+  .primary-menu .menu-toggle,
+  .primary-menu .menu-toggle-target-show:target ~ .menu-toggle--hide {
     display: none;
   }
 }
diff --git a/core/themes/bartik/css/layout.css b/core/themes/bartik/css/layout.css
index 73104a3055..f0d03986d0 100644
--- a/core/themes/bartik/css/layout.css
+++ b/core/themes/bartik/css/layout.css
@@ -29,3 +29,10 @@
   margin-top: 20px;
   margin-bottom: 40px;
 }
+
+/**
+ * Primary menu region
+ */
+.layout-primary-menu {
+  clear: both;
+}
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 0000000000..8ea319dec9
--- /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) %}