Mobile Header Element

COMPONENT SELECTOR GUIDE

Mobile 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-mobile	The header display on mobile devices.

HTML Structure Explanation

The selector “.header-display-mobile” refers to the header display when on mobile devices. This element contains the site title or logo, the hamburger menu icon, and the shopping cart icon if enabled.

Various Mobile 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-mobile-layout-logo-left-nav-right	The header being styled with layout 1 (logo on left, menu and CTAs on right)
.header-mobile-layout-logo-center-nav-right	The header being styled with layout 2 (logo in center, CTAs on left and menu on right)
.header-mobile-layout-logo-right-nav-right	The header being styled with layout 3 (logo and menu on right, menu in center, CTAs on left)
.header-mobile-layout-logo-center-nav-left	The header being styled with layout 4 (logo in center, menu on left, CTAs on right)
.header-mobile-layout-logo-right-nav-left	The header being styled with layout 5 (logo on right, menu and CTAs on left)

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 to this element depending on which mobile layout is selected.

Mobile Header When Menu is Open

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--menu-open	The body tag when the mobile menu is open. Since this targets the body tag of the page, we can use this as an ancestor selector if you want to target a mobile menu item only when the menu is open.

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 to this element depending on which mobile layout is selected.

Mobile Site Title

Relevant CSS Selectors

If you want to select the site title elements only when the mobile menu is open, use the selector “.header--menu-open” as an ancestor selector. See this section for more details.

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-mobile .header-title	The site title container.
.header-display-mobile #site-title	The site title link text.

HTML Structure Explanation

The header title container and text link inside of the mobile header display.

Mobile Logo

Relevant CSS Selectors

If you want to select the site logo elements only when the mobile menu is open, use the selector “.header--menu-open” as an ancestor selector. See this section for more details.

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-mobile .header-title	The logo container.
.header-display-mobile img	The logo image.

HTML Structure Explanation

The mobile header logo container and the image inside of it.

CTA Elements on Mobile

Relevant CSS Selectors

If you want to select the shopping cart elements only when the mobile menu is open, use the selector “.header--menu-open” as an ancestor selector. See this section for more details.

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 Shopping Cart
.header-display-mobile .header-actions	The outer container for the shopping cart icon elements.
.header-display-mobile .header-actions-action--cart	The container for the cart icon and quantity text.
.header-display-mobile .icon--cart	The SVG vector imagery of the cart icon.
.header-display-mobile .icon-cart-quantity	The container for the cart quantity text element.
.header-display-mobile .sqs-cart-quantity	The cart quantity text.
CTA Social Links
.header-menu-actions	The social media icons container in the mobile menu that contains the social links.
.header-menu-actions-action	The div element that holds the SVG vector icons and their respective links.
.header-menu-actions-action .header-icon svg	The SVG vector icon of each of the social media icons on mobile.
.header-menu-actions-action .header-icon[href*="SOCIAL_NAME_GOES_HERE"]	The link element that holds the SVG vector icon of the specified social media icon.
.header-menu-actions-action .header-icon[href*="SOCIAL_NAME_GOES_HERE"] svg	The SVG vector icon of the specified social media icon.
CTA Button
.header-actions-action--cta	The CTA button container in the header.
.header-menu-cta .btn	The CTA button in the header on mobile.

HTML Structure Explanation

CTA elements in the mobile header and menu.

Mobile Menu Hamburger Button

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-burger	The icon button container in the mobile header.
.header-burger-btn	The HTML button element in the mobile header.
.burger-inner	The parent container of the elements that make up the actual icon (the horizontal and vertical lines).
.burger-inner.header-menu-icon-doubleLineHamburger	The element in the inner button container that specifies the double hamburger icon style.
.burger-inner.header-menu-icon-tripleLineHamburger	The element in the inner button container that specifies the triple hamburger icon style.
.burger-inner.header-menu-icon-halfLineHamburger	The element in the inner button container that specifies the triple hamburger icon with left alignment style.
.burger-inner.header-menu-icon-plus	The element in the button container that specifies the plus icon style.
.header-burger .top-bun	The top hamburger patty of the different hamburger icon styles. When the plus icon style is selected, this refers to the horizontal line.
.header-burger .patty	The middle hamburger patty of the different hamburger icon styles.
.header-burger .bottom-bun	The bottom hamburger patty of the different hamburger icon styles. When the plus icon style is selected, this refers to the vertical line.

HTML Structure Explanation

The mobile menu hamburger button.

Mobile 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)
General Selectors
.header-menu-nav-folder	The container of all mobile navigation elements, including the menu items, and CTA buttons.
.header-menu-nav-folder-content	The container of the mobile menu items.
.header-menu-nav-folder .header-menu-nav-item	All of the mobile menu link parent containers.
.header-menu-nav-folder .header-menu-nav-item a	All of the mobile menu links.
Specific Menu Item Selectors
.header-menu-nav-item a[href="URL_OF_PAGE"]	A menu item link with a specific href attribute.
Root Folder Menu Items
.header-menu-nav-folder[data-folder="root"]	The container of the root folder menu (first-level menu).
.header-menu-nav-folder[data-folder="root"] .header-menu-nav-item	All menu items inside of the root folder menu. These are the parent elements to the links.
.header-menu-nav-folder[data-folder="root"] a	All links inside of the root folder menu.
.header-menu-nav-item a[data-folder-id]	The folder menu links in the root folder. This corresponds to the first-level folder menu items that open dropdown menus in the desktop navigation.
.header-menu-nav-item a[data-folder-id] .chevron	The right chevron arrow that appears next to the folder menu links in the root folder.
Specified Folder Menu Items
.header-menu-nav-folder[data-folder="FOLDER_URL_GOES_HERE"]	The container of the folder menu with the specified URL. This corresponds to the dropdown menus of folder menu items on desktop.
.header-menu-nav-folder[data-folder="FOLDER_URL_GOES_HERE"] .header-menu-nav-item	The links inside of the folder menu with the specified URL. This corresponds to the dropdown menu items of folder menu items on desktop.
.header-menu-nav-folder[data-folder="FOLDER_URL_GOES_HERE"] a	The links inside of the folder menu with the specified URL. This corresponds to the dropdown menu item links of folder menu items on desktop.
Non-Root Folder Menu Items (all folder menu items that are NOT in the root folder)
.header-menu-nav-folder:not([data-folder="root"])
.header-menu-nav-folder:not([data-folder="root"]) .header-menu-nav-item	The menu items inside of the non-root folders, including the "Back" control.
.header-menu-nav-folder:not([data-folder="root"]) .header-menu-nav-item a	The links inside of the non-root folders, including the "Back" control.
.header-menu-nav-folder:not([data-folder="root"]) .header-menu-nav-item:not(.header-menu-controls)	The menu items inside of the non-root folders, NOT including the "Back" control.
.header-menu-nav-folder:not([data-folder="root"]) .header-menu-nav-item:not(.header-menu-controls) a	The links inside of the non-root folders, NOT including the "Back" control.
.header-menu-controls	The "Back" control menu item.
.header-menu-controls a	The "Back" control link.
.header-menu-controls .chevron--left	The "Back" control arrow.