Site Studio
Updating the Primitives UIKit site header
The UIKit includes a Header component, which is placed at the top of the site templates. The header includes a site logo, search field, main navigation, utilities navigation and social network links.
The header component has configurable settings that allow you to make changes to the header without modifying the Header component. To configure the Header component, navigate to Site Studio > Templates > Master templates. The Header component needs configuring in both the Site template and the Site template - Boxed.
Configuration options available:
Modifier classes with inline styles are added to the .site-header element to achieve these behaviors.
Choose from Light, Dark, or Colored header themes. The selected theme corresponds to the following custom style class that are applied to the header element.
If you would like to update the theme with different colors to match your brand, you can do one of the following:
Modifier classes with inline styles are added to the .site-header element to achieve these behaviors. They affect the display of the main navigation at the breakpoints laptop and above.
If the configuration options (listed above) don't meet your requirements, you can directly change the Header component. For example, you may not want to include the Utilities navigation bar. In this case, you would need to remove it from the Header components.
Before making any changes to the Header component, read the information below to understand how it is built and the best way to make modifications.
The header component layout canvas can be split into multiple parts:
Let’s go into these in a bit more detail.
These are separate components that display secondary menu links and social links - their content is the same. The only difference is how they are displayed at different breakpoints - they have unique styles.
Social links is also a separate component that is added to both utility bars. You will need to update the social links in both utility bars as they are separate instances.
The horizontal utility bar is the first-child of the .site-header and is displayed above the main header on breakpoints laptop and above.
The vertical utility bar resides in Container - center > .main-menu-wrapper and is displayed within the mobile menu on breakpoints tablet and below.
These sibling containers are critical for menu alignment options to work correctly and must not be deleted, as they grow and shrink with CSS Flexbox properties to support this.
The contents within these containers can be changed, for example, having the search in the left container and the logo in the right container.
The left and center containers visually reorder at breakpoints tablet and below so that the logo appears in the middle between the mobile menu toggle button and the search. This is achieved using the Flexbox Order property.
In the component form settings, if Header position > Fixed is selected, match heights JS sets the height of this container to the height of .site-header, so that page content does not go under the header until scrolled. This container has no content inside it.
Match heights are necessary for this as the header has variable height.
If this content did not answer your questions, try searching or contacting our support team for further assistance.
Modifier classes with inline styles are added to the .site-header element to achieve these behaviors. They affect the display of the main navigation at the breakpoints laptop and above.
If the configuration options (listed above) don't meet your requirements, you can directly change the Header component. For example, you may not want to include the Utilities navigation bar. In this case, you would need to remove it from the Header components.
Before making any changes to the Header component, read the information below to understand how it is built and the best way to make modifications.
The header component layout canvas can be split into multiple parts:
Let’s go into these in a bit more detail.
These are separate components that display secondary menu links and social links - their content is the same. The only difference is how they are displayed at different breakpoints - they have unique styles.
Social links is also a separate component that is added to both utility bars. You will need to update the social links in both utility bars as they are separate instances.
The horizontal utility bar is the first-child of the .site-header and is displayed above the main header on breakpoints laptop and above.
The vertical utility bar resides in Container - center > .main-menu-wrapper and is displayed within the mobile menu on breakpoints tablet and below.
These sibling containers are critical for menu alignment options to work correctly and must not be deleted, as they grow and shrink with CSS Flexbox properties to support this.
The contents within these containers can be changed, for example, having the search in the left container and the logo in the right container.
The left and center containers visually reorder at breakpoints tablet and below so that the logo appears in the middle between the mobile menu toggle button and the search. This is achieved using the Flexbox Order property.
In the component form settings, if Header position > Fixed is selected, match heights JS sets the height of this container to the height of .site-header, so that page content does not go under the header until scrolled. This container has no content inside it.
Match heights are necessary for this as the header has variable height.
If this content did not answer your questions, try searching or contacting our support team for further assistance.
Site Studio