The Website Header
COMPONENT SELECTOR GUIDE
Website Header Element
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 | The header element at the top of the page that contains navigation elements. |
|
HTML Structure Explanation
The website header selector refers to the HTML <header> element that contains all of the navigation elements, including the navigation menu, the logo or site title, the CTA buttons, and the social links. This is the outermost element of the site header.
In this section, we are focusing on the ID selector highlighted below.
The <header> element with an ID of “header”.
Various Header Styles
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[data-header-style="solid"] | The header using the "Solid" style. When the "Solid" style is active, this selector is NOT used to set the header background color; instead the class selector ".header-background-solid" is used, which targets an element inside of the header element. |
|
| #header[data-header-style="gradient"] | The header using the "Gradient" style. When the "Gradient" style is active, this selector is NOT used to set the header background color; instead the class selector ".header-background-gradient" is used, which targets an element inside of the header element. |
|
| #header[data-header-style="theme"] | The header using the "Theme" style. See the table below this one to view the selectors for targeting the header based on the selected color theme. |
|
| #header[data-header-style="dynamic"] | The header using the "Dynamic" style. When the "Dynamic" style is active, this selector is NOT used to set the header background color; instead the class selector ".header-background-dynamic" is used, which targets an element inside of the header element. |
|
HTML Structure Explanation
The website header selector refers to the HTML <header> element that contains all of the navigation elements, including the navigation menu, the logo or site title, the CTA buttons, and the social links. This is the outermost element of the site header.
In this section, the attribute we are focusing on is the “data-header-style” attribute highlighted below, which is given to the <header> element and reflects which style it is currently in, and one particular class name that corresponds to the color when the header is given the “Theme” style.
The <header> element with a “data-header-style” attribute.