Header component - navigation menu won't collapse

crosslandwa commented 5 years ago

Repo steps

Using Chrome 71 (OS X) With the following css/js in my page:

    ...
   <link href="/govuk/style/govuk-frontend-2.7.0.min.css" rel="stylesheet" />
</head>
    ...
    <script src="/govuk/js/govuk-frontend-2.7.0.min.js"></script>
</body>

And the following header/nav markup (svg element omitted for brevity):

<header class="govuk-header " role="banner" data-module="header">
  <div class="govuk-header__container govuk-width-container">
    <div class="govuk-header__logo">
      <a href="/" class="govuk-header__link govuk-header__link--homepage">
        <span class="govuk-header__logotype">
          <span class="govuk-header__logotype-text">
            GOV.UK
          </span>
        </span>
      </a>
    </div>
    <div class="govuk-header__content">
      <button type="button" role="button" class="govuk-header__menu-button js-header-toggle" aria-controls="navigation" aria-label="Show or hide Top Level Navigation">Menu</button>
      <nav>
        <ul id="navigation" class="govuk-header__navigation " aria-label="Top Level Navigation">
          <li class="govuk-header__navigation-item">
            <a class="govuk-header__link" href="/paye-file-exb/1718/org/840/MODE26A/expense-and-benefits-return?govukUI=true&amp;lang=cym">Cymraeg</a>
          </li>
          <li class="govuk-header__navigation-item">
            <a class="govuk-header__link popup-window" href="/information/help?helpcategory=security" title="opens in a new window">Help</a>
          </li>
          <li class="govuk-header__navigation-item">
            <a class="govuk-header__link" href="">Sign out</a>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</header>

Expected On a narrow screen, the responsive menu collapses when the menu button is clicked

Actual Nothing happens when clicking menu

Also When I swap out the 2.7.0.min.js to the version currently used by the Gov UK Design System page (https://design-system.service.gov.uk/javascripts/govuk-frontend-6774f05fd1e83b0846021758e67791fb.js) the menu minimises as expected

I'm also able to reproduce this using the currently provided header markup from the Header component from the https://design-system.service.gov.uk/components/header/ page

<header class="govuk-header " role="banner" data-module="header">
  <div class="govuk-header__container govuk-width-container">

    <div class="govuk-header__logo">
      <a href="#" class="govuk-header__link govuk-header__link--homepage">
        <span class="govuk-header__logotype">
          <span class="govuk-header__logotype-text">
            GOV.UK
          </span>
        </span>
      </a>
    </div>
    <div class="govuk-header__content">

      <a href="#" class="govuk-header__link govuk-header__link--service-name">
        Service name
      </a>

      <button type="button" role="button" class="govuk-header__menu-button js-header-toggle" aria-controls="navigation" aria-label="Show or hide Top Level Navigation">Menu</button>
      <nav>
        <ul id="navigation" class="govuk-header__navigation " aria-label="Top Level Navigation">
          <li class="govuk-header__navigation-item govuk-header__navigation-item--active">
            <a class="govuk-header__link" href="#1">
              Navigation item 1
            </a>
          </li>
          <li class="govuk-header__navigation-item">
            <a class="govuk-header__link" href="#2">
              Navigation item 2
            </a>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</header>

36degrees commented 5 years ago

Hi Will,

I think you're missing the call to actually initialise the Frontend components…

<script>window.GOVUKFrontend.initAll()</script>

If you include this after you include the JavaScript, I believe the header should work as expected.

More information is in the installation docs

36degrees commented 5 years ago

Actually, sorry, that might not be it…

If I try disabling JS on the components in the Design System I don't see the menu button. Your navigation links are also not rendering as expected (the bullets shouldn't be there)

Is this code public anywhere we could take a look?

crosslandwa commented 5 years ago

Thanks @36degrees - adding that initialisation has fixed it

Also, with JS disabled (in the browser) I'm seeing the below (ie. no menu button):

Is that as expected?

36degrees commented 5 years ago

Looks correct to me 👍

crosslandwa commented 5 years ago

Great - thanks for your help. I'll close this issue

alphagov / govuk-frontend

Header component - navigation menu won't collapse #1224