Desktop Header Elements
COMPONENT SELECTOR GUIDE
Desktop Navigation Display
Relevant CSS Selectors
| CSS Selector(s) | HTML Element | Picture of Element (the blue area highlights the element; the green area highlights the element's padding; the orange area highlights the element's margin) |
|---|---|---|
| .header-display-desktop | The header display on desktop devices |
|
HTML Structure Explanation
The selector “.header-display-desktop” refers to the header display when on desktop devices. This element contains the site title or logo, the navigation menu, and all CTA elements.
The <div> elements with the class name “header-display-desktop” which targets the desktop header layout.
Various Desktop Header Layouts
Relevant CSS Selectors
| CSS Selector(s) for Header Styles | HTML Element | Picture of Element (the blue area highlights the element; the green area highlights the element's padding; the orange area highlights the element's margin) |
|---|---|---|
| .header-layout-nav-right | The header being styled with layout 1 (logo on left, menu and CTAs on right) |
|
| .header-layout-nav-left | The header being styled with layout 2 (logo and menu on left, CTAs on right) |
|
| .header-layout-nav-center | The header being styled with layout 3 (logo on left, menu in center, CTAs on right) |
|
| .header-layout-branding-center | The header being styled with layout 4 (logo in center, menu on left, CTAs on right) |
|
| .header-layout-branding-center-nav-center | The header being styled with layout 5 (logo and menu in center, CTAs on left and right) |
|
HTML Structure Explanation
The various class names in the above table target a <div> element within the main <header> element. You can view it in the screenshot below. They will be added depending on which layout is selected.
The <div> element inside the header with a class name of “header-layout-branding-center-nav-center along with other class names. This class name will change based on the desktop layout being applied.
Desktop Site Title
Relevant CSS Selectors
| CSS Selector(s) | HTML Element | Picture of Element (the blue area highlights the element; the green area highlights the element's padding; the orange area highlights the element's margin) |
|---|---|---|
| .header-display-desktop .header-title | The site title container. |
|
| .header-display-desktop #site-title | The site title link text. |
|
HTML Structure Explanation
The header title container and text link inside of the desktop header display.
The header title container and text link inside of the desktop header display.
Desktop Logo
Relevant CSS Selectors
| CSS Selector(s) | HTML Element | Picture of Element (the blue area highlights the element; the green area highlights the element's padding; the orange area highlights the element's margin) |
|---|---|---|
| .header-display-desktop .header-title | The logo container. |
|
| .header-display-desktop img | The logo image. |
|
HTML Structure Explanation
The desktop header logo container and the image inside of it.
The desktop header logo container and the image inside of it.
CTA Elements on Desktop
Logo/site title and menu are centered, and two separate CTA containers are on either side of the centered elements.
Relevant CSS Selectors
| CSS Selector(s) | HTML Element | Picture of Element (the blue area highlights the element; the green area highlights the element's padding; the orange area highlights the element's margin) |
|---|---|---|
| CTA Container | ||
| .header-actions | Both of the CTA containers (on the right and/or the left depending on the desktop header layout selected). |
|
| .header-actions--right | The CTA container that appears on the right of the header. |
|
| .header-actions--left | The CTA container that appears on the left of the header. |
|
| CTA Elements | ||
| .header-actions-action | All of the CTA elements in the outer CTA container, including the social media container, the shopping cart container, and the button container. |
|
| CTA Button | ||
| .header-actions-action--cta | The CTA button container in the header. |
|
| .header-actions-action--cta .btn | The CTA button in the header. |
|
| CTA Icons General Selector | ||
| .header-actions .icon | The icons in the CTA container, including the social media icons and the shopping cart icon. |
|
| CTA Social Media Elements | ||
| .header-actions-action--social | The social media icons container that contains the icon SVG vector images for your social links. |
|
| .header-actions-action--social .header-icon | The link elements that contain the SVG vector icons. |
|
| .header-actions-action--social .header-icon svg | The SVG vector icons of each of the social media icons. |
|
| .header-actions-action--social .header-icon[href*="SOCIAL_NAME_GOES_HERE"] | The link element that contains the SVG vector icon of the specified social media icon |
|
| .header-actions-action--social .header-icon[href*="SOCIAL_NAME_GOES_HERE"] svg | The SVG vector icon of the specified social media icon. |
|
| CTA Shopping Cart Elements | ||
| .header-actions-action--cart | The shopping cart container that contains the icon vector imagery, and the cart quantity text. |
|
| .header-actions-action--cart .icon--cart | The shopping cart SVG vector imagery. |
|
| .header-actions-action--cart .icon-cart-quantity | The cart quantity container. |
|
| .header-actions-action--cart .sqs-cart-quantity | The cart quantity text. |
|
HTML Structure Explanation
The CTA container and it’s elements, including the button, the social media actions, and the shopping cart action.
The CTA container and it’s elements, including the button, the social media actions, and the shopping cart action.
Desktop Navigation Menu Items
Relevant CSS Selectors
| CSS Selector(s) | HTML Element | Picture of Element (the blue area highlights the element; the green area highlights the element's padding; the orange area highlights the element's margin) |
|---|---|---|
| .header-nav-list | The container of the header menu items. |
|
| .header-nav-item a | All menu item links. |
|
| .header-nav-item a[href="URL_OF_PAGE"] | A menu item link with a specific href attribute. |
|
| .header-nav-item | All of the first-level desktop menu link parent containers. |
|
| .header-nav-item > a | All of the first-level desktop menu links. |
|
| .header-nav-item--folder | The first-level menu item link containers of folder menus. |
|
| .header-nav-item--folder > .header-nav-folder-title | The first-level menu item links of folder menus. |
|
| .header-nav-folder-content | The dropdowns of the folder menus. |
|
| .header-nav-folder-item | The link containers inside of the folder menu dropdowns. |
|
| .header-nav-folder-item a | The links inside of the folder menu dropdowns. |
|
HTML Structure Explanation
The desktop navigation menu container selector refers to the flexbox <nav> element with a class name of “header-nav-list” that contains all of the desktop menu items.
The <nav> element with a class name of “header-nav-list”. This element is styled using a flexbox.