Header drop down menu covers the top of the page contents

CHANGELOG.md

@@ -1,5 +1,11 @@
 # NHS.UK frontend Changelog
 
+## 8.0.2 - 019 October 2023
+
+:wrench: **Fixes**
+
+- Resolves the bug of the drop down menu covering the main content of the page ([PR 898](https://github.com/nhsuk/nhsuk-frontend/pull/898)).
+
 ## 8.0.1 - 02 October 2023
 
 :wrench: **Fixes**

app/components/header/header-service-name-with-nav.njk

@@ -28,10 +28,6 @@
           'url'  : '#',
           'label' : 'Accessibility'
         },
-        {
-          'url'  : '#',
-          'label' : 'Design principles'
-        },
         {
           'url' : '#',
           'label' : 'Community and contribution'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nhsuk-frontend",
-  "version": "8.0.1",
+  "version": "8.0.2",
   "description": "NHS.UK frontend contains the code you need to start building user interfaces for NHS websites and services.",
   "scripts": {
     "prepare": "gulp bundle",

packages/components/header/header.js

@@ -109,9 +109,9 @@ class Header {
    */
 
   openMobileMenu() {
-    const marginBody = this.mobileMenu.offsetHeight
     this.menuIsOpen = true
     this.mobileMenu.classList.remove('nhsuk-header__drop-down--hidden')
+    const marginBody = this.mobileMenu.offsetHeight
     this.navigation.style.marginBottom = `${marginBody}px`
     this.mobileMenuToggleButton.setAttribute('aria-expanded', 'true')
 

packages/components/header/template.njk

@@ -104,6 +104,7 @@
       </nav>
     </div>
 
+
     {% endif -%}
 
     {% if showSearch == "true" and showNav == "false" %}
@@ -132,32 +133,34 @@
     {% if showNav == "true" and params.primaryLinks and showSearch == "false" %}
 
     </div>{# close nhsuk-header__container #}
-
-    <nav class="nhsuk-navigation" id="header-navigation" role="navigation" aria-label="Primary navigation">
-      <ul class="nhsuk-header__navigation-list">
-        {%- for item in params.primaryLinks %}
-        <li class="nhsuk-header__navigation-item">
-          <a class="nhsuk-header__navigation-link"  href="{{item.url}}">
-            {{item.label}}
-          </a>
-        </li>
-        {%- endfor %}
-        <li class="nhsuk-header__navigation-item nhsuk-header__navigation-item--home">
-          <a class="nhsuk-header__navigation-link"  href="/">
-            Home
-          </a>
-        </li>
-        <li class="nhsuk-mobile-menu-container">
-          <button class="nhsuk-header__menu-toggle nhsuk-header__navigation-link" id="toggle-menu" aria-expanded="false">
-            <span class="nhsuk-u-visually-hidden">Browse</span>
-            More
-            <svg class="nhsuk-icon nhsuk-icon__chevron-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
-              <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
-            </svg>
-          </button>
-        </li>
-      </ul>
-    </nav>
+
+    <div class="nhsuk-navigation-container">
+      <nav class="nhsuk-navigation" id="header-navigation" role="navigation" aria-label="Primary navigation">
+        <ul class="nhsuk-header__navigation-list">
+          {%- for item in params.primaryLinks %}
+          <li class="nhsuk-header__navigation-item">
+            <a class="nhsuk-header__navigation-link"  href="{{item.url}}">
+              {{item.label}}
+            </a>
+          </li>
+          {%- endfor %}
+          <li class="nhsuk-header__navigation-item nhsuk-header__navigation-item--home">
+            <a class="nhsuk-header__navigation-link"  href="/">
+              Home
+            </a>
+          </li>
+          <li class="nhsuk-mobile-menu-container">
+            <button class="nhsuk-header__menu-toggle nhsuk-header__navigation-link" id="toggle-menu" aria-expanded="false">
+              <span class="nhsuk-u-visually-hidden">Browse</span>
+              More
+              <svg class="nhsuk-icon nhsuk-icon__chevron-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+                <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
+              </svg>
+            </button>
+          </li>
+        </ul>
+      </nav>
+    </div>
 
     {% endif -%}