diff --git a/bulma.theme b/bulma.theme
index 936f1e1..3344c51 100644
--- a/bulma.theme
+++ b/bulma.theme
@@ -169,6 +169,13 @@ function bulma_preprocess_block(&$variables) {
     }
   }
 
+  // Customize the ID and classes of the main menu block.
+  $main_menu = Bulma::singleSetting('bulma_general_menu');
+  if (!empty($variables['elements']['#id']) && $variables['elements']['#id'] === 'bulma_' . $main_menu . '_menu') {
+    $variables['attributes']['id'] = 'nav-menu';
+    $variables['attributes']['class'][] = 'nav-menu';
+    $variables['attributes']['class'][] = 'nav-right';
+  }
 }
 
 /**
diff --git a/templates/system/page.html.twig b/templates/system/page.html.twig
index b041f68..db4abbf 100644
--- a/templates/system/page.html.twig
+++ b/templates/system/page.html.twig
@@ -45,12 +45,13 @@
  * @ingroup themeable
  */
 #}
-<div id="header">
+<section class="hero is-primary">
     {# Top navbar #}
     {% if page.navbar_branding or page.navbar_social or page.primary_menu %}
-        <div class="container">
-            <nav class="nav">
-                <div class="nav-left">
+    <div class="hero-head">
+        <nav class="main-nav nav">
+            <div class="container">
+                <div class="nav-left is-clipped">
                     {{ page.navbar_branding }}
                 </div>
                 <div class="nav-center">
@@ -62,45 +63,42 @@
                     <span></span>
                     <span></span>
                 </span>
-                <div id="nav-menu" class="nav-right nav-menu">
-                    {{ page.primary_menu }}
-                </div>
+                {{ page.primary_menu }}
                 {% endif %}
-            </nav>
-        </div>
+            </div>
+        </nav>
+    </div>
     {% endif %}
 
     {% if page.header or page.header_search %}
-    <section class="hero is-primary">
-        {# Header hero region + search #}
-        <div class="hero-body">
-            <div class="container">
-                <div class="columns is-vcentered">
-                    <div class="column">
-                        {{ page.header }}
-                        {% if is_front %}
-                            <h1 class="title">{{ site_slogan }}</h1>
-                        {% endif %}
-                    </div>
-                    <div class="column is-narrow">
-                        {{ page.header_search }}
-                    </div>
+    {# Header hero region + search #}
+    <div class="hero-body">
+        <div class="container">
+            <div class="columns is-vcentered">
+                <div class="column">
+                    {{ page.header }}
+                    {% if is_front %}
+                        <h1 class="title">{{ site_slogan }}</h1>
+                    {% endif %}
+                </div>
+                <div class="column is-narrow">
+                    {{ page.header_search }}
                 </div>
             </div>
         </div>
-        {% endif %}
+    </div>
+    {% endif %}
 
-        {# Drupal tabs #}
-        {% if page.header_tabs %}
-            <div class="hero-footer">
-                <div class="container">
-                    {{ page.header_tabs }}
-                </div>
+    {# Drupal tabs #}
+    {% if page.header_tabs %}
+        <div class="hero-footer">
+            <div class="container">
+                {{ page.header_tabs }}
             </div>
-        {% endif %}
+        </div>
+    {% endif %}
 
-    </section>
-</div>
+</section>
 
 {# Secondary menu #}
 {% if page.secondary_menu %}