Implementation
Classes
Primary navigation
| Name | Description |
|---|---|
| Wrapper for the primary nav component applied to <nav> element |
| Applies the mega menu style to menu links that contain sub-navigation |
| Container for navigation links |
| Styles the main menu wrapper and its inner contents. |
| This class traps keyboard focus within the navigation when it's opened. |
| This styles the header of the navigation on mobile viewports. |
| Styles text within the the mobile navigation. |
| Styles the header of the navigation, the toggle button, and its "close" state respectively. |
| Defines the layout and position of menu navigation items |
| Class applied to <li> items. This class sets list items to appear vertically on mobile and horizontally on desktop. |
| This is what creates the visual appearance of the primary level 1 menu links. |
qld__main-nav__overlay | Sets the overlay colour that applies across the screen when mobile menu is toggled open. |
Mega-menu sub-navigation
| Name | Description |
|---|---|
| Class that controls style of mega menu toggle buttons in the primary nav. |
| This class works with the accordion classes to style the submenu container. |
| Content container for sub-navigation items. This applies the padding |
| Container for header section of mega menu which containers link to level 1 category. |
| Styles the heading of the submenu. |
| Used to style the footer of the submenu. |