Multi-line header

[fionamorrison23]

User story

As an site owner
I want the option to set my site up with a multi-line header
So that I can adhere to branding requirements for the logo
And have a CTA in a prominent position
And allow enough room for more primary menu links

Description

CivicTheme users have reported that the space we have for the primary menu is often not wide enough, especially when they have a co-branded (two) logo, and/or when menu link titles are long.

This new multi-line header design allows the user to have:

• One row for the logo/s
• Option to add up to 2 CTA buttons to the logo row
• A separate row for the primary menu

When setting up the site, site builder will need an option to choose the current single line header or the new multi-line header.

Design

https://www.figma.com/design/7vl6Aobg7G8gBCcRriNegr/CivicTheme%3A-Design-System-v1.10-(WIP)?node-id=2976-41810&p=f&t=PI2p0JrF8kp9oQcM-0

Acceptance criteria

AC 1 - Display logo in the first row
Given I’m a Content Author
And the multi-line header is enabled
When I add the logo/s
Then they display in the first row should

AC 2 - Display CTA buttons in the first row
Given I’m a Content Author
And the multi-line header is enabled
When I choose to add up to two optional CTA buttons
Then they display on the right side of first row
And I can choose to style them as Primary or Secondary buttons

AC 3 - Display primary menu in the second row
Given I’m a Content Author
And the multi-line header is enabled
When I add primary menu links
Then the primary navigation displays in the second row below the logo / CTA row

AC 4 - Responsive behaviour for multi-line header
Given the multi-line header layout is enabled
When I view the site on different screen sizes
Then the header should be responsive and maintain usability

Accessibility

AC 5 - Header adapts to screen readers
Given I’m an anonymous user using screen reader technology
When the header is announced
Then it conveys its purpose and structure clearly without redundant or missing information

Ac 6 - Header is responsive without loss of accessibility
Given the multi-line header layout is enabled
When the screen size changes
Then all elements should remain accessible and operable, including mobile menu toggles and focus states

AC 7 - Header structure follows semantic HTML
Given I’m an anonymous user
And the multi-line header layout is enabled
When the page is rendered
Then the header uses semantic HTML elements

AC 8 - CTA buttons have accessible labels
Given I’m an anonymous user using screen reader technology
And the multi-line header layout is enabled
When I engage with the CTA buttons
Then each button has meaningful text or an aria-label for screen reader users

AC 9 - Menu has proper ARIA roles and attributes
Given I’m an anonymous user using screen reader technology
And the multi-line header layout is enabled
When the menu is rendered
Then it has appropriate ARIA roles such as role="navigation" and aria-expanded for dropdowns

AC 10 - CTA buttons are keyboard accessible
Given I’m an anonymous user
And the multi-line header layout is enabled
When I navigate using the keyboard
Then all CTA buttons are focusable and operable via keyboard input

AC 11 - Primary menu is fully navigable via keyboard
Given I’m an anonymous user
And the multi-line header layout is enabled
When I navigate through the menu using the keyboard
Then all menu items are focusable and selectable via keyboard input

AC 12 - Error Handling and Feedback
Given I’m an anonymous user with accessibility needs
When an error occurs (e.g., failed load of a header element)
Then the header should gracefully handle the error without breaking accessibility features, and provide meaningful feedback.

AC 13 - Color Contrast Compliance
Given I’m an anonymous user
When I view the header
Then all text and interactive elements should meet WCAG 2.1 AA contrast ratios.

AC 14 - Focus Order
Given I’m an anonymous user navigating by keyboard
When I move through the header
Then the focus should follow a logical order without skipping interactive elements.

###Solution direction

[alan-cole]

Solution Direction:

1. Remove border bottom from ct-header__middle. Place it on bottom of footer.
2. Move primary (.ct-header__content-middle3 .ct-navigation) and secondary (.ct-header__content-top3 .ct-navigation) styles from the ct-header into ct-navigation component. A type parameter should be added to navigation.twig to allow ct-navigation--primary or ct-navigation--secondary modifiers to be added, which control how the menu will look.
3. A ct-navigation placed in the header bottom3 region should be left aligned. Right aligned in the middle3 region.
4. Update header and navigation stories to use the new navigation parameter.

Additional changes needed for drupal theme, will be implemented as part of: https://www.drupal.org/project/civictheme/issues/3510841