Navigation

Description

The navigation is the header on every page: the logo, the top-level links, the search button, the apply button, and the popups that open underneath them. On smaller screens the same header becomes the mobile menu.

It is built from one header template plus a separate template for each popup, and the link lists inside the popups come from WordPress menus rather than from the templates.

How to edit

The header and its top-level links

1. Go to Elementor → Theme Builder and open Header main navbar – 2024. You can also double-click the header from any page in the Elementor editor.
2. Edit the logo, the top-level link labels, the search button, and the apply button directly.
3. Save, then check a page.

Inside a popup

1. Go to Elementor → Theme Builder and search for Menu Popup. There is one template per popup.
2. Open the popup you want and edit its headings, buttons, and featured content.
3. To change the links themselves, edit the WordPress menu instead — see Menus.
4. Save, then check the popup on desktop and mobile.

Leave the existing IDs and classes in place while editing. The header's behaviour — hiding on scroll, the logo swap, the search popup, the mobile menu — is driven by them, so removing one breaks that behaviour rather than simply changing how it looks.

Variants

Popups

Three popups open from the header links, and each takes its links from a WordPress menu:

The search popup works differently. It holds the search field and a set of popular search terms, which are content in its own template rather than a menu.

See Menus for which menu belongs to which popup.

How the header behaves

• It hides on the way down and returns on the way up. Scrolling down slides the header out of view, and scrolling back up brings it in with a white background and a soft shadow.
• The logo swaps between a light and a dark version so that it stays legible. The dark logo is used on Q Card pages, over light heroes, while a popup or the search is open, and once you scroll back up. The light logo is used over dark heroes.
• The header colours follow the page. Link and icon colours change for Q Card and Q Mastercard pages and over light or dark heroes, which is why the same header can look different from one page to the next.
• On mobile it becomes the mobile menu, opened and closed with the menu button. Choosing a product opens its links as a second panel over the first.

The mobile menu reuses the same popup content, so a change to one of the popup menus shows up on mobile as well. The login link is hidden on the narrowest screens.

Classes

Primary IDs and classes used by the navigation.

Header

Search

Popups

Mobile

Styling is done through a combination of the built-in page builder options as well as custom CSS where needed.