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.
- Relative - the header will scroll off-screen as the page is scrolled.
- Fixed - the header will stay at the top of the screen as the page is scrolled. Page content will scroll underneath it.
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.
- Header light theme - .coh-style-header-light-theme
- Header dark theme - .coh-style-header-dark-theme
- Header colored theme - .coh-style-header-colored-theme
If you would like to update the theme with different colors to match your brand, you can do one of the following:
- If you know the colors being changed need to be changed everywhere on the site, change them in Website settings > Color palette. This will then update all uses of the changed color.
- If you only want the changes to apply to the header component, add any new colors to your color palette so they can be reused, then update the relevant header theme custom style (Listed above).
Site logo
- Site logo - Upload your site logo. The image will always maintain its aspect ratio. Breakpointed width controls are provided to further restrict the width of the logo. The image will not exceed the height of the header. For example:
- If the uploaded image has a height greater than the header, it will automatically shrink down to the header height.
- If the image uploaded has a smaller height than the header, it will be displayed actual size.
- Alt tag - Provides a text alternative for the logo image that is read by screen readers and is displayed on the screen if the image doesn’t load.
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.
- Main navigation menu position - Choose from Left, Center and Right. The main menu will be horizontally-aligned according to the option selected. Menu links may wrap onto multiple lines if there isn’t enough horizontal space. If you do not want this to happen, consider reducing the width of your site logo and/or the number of top-level links in your menu.
- Drop-down menu columns - Select the number of columns you would like your second-level menu links to be split into, creating a mega menu style. If 1 is selected, the second-level links will display in a single column, so only use this option for smaller menus.
- Menu toggle button ARIA label - This adds a screen reader accessible label to the mobile menu toggle button. This button is visible from the tablet breakpoint down.
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:
- The header element (with class .site-header) - a container that wraps around all other header content.
- The horizontal utilities bar (with class .utilities-bar-horizontal).
- Three sibling containers labelled left, centre and right.
- The vertical utilities bar (with class .utilities-bar-vertical).
- A container that is a sibling to the .site-header.
Let’s go into these in a bit more detail.
Horizontal and vertical utilities bars
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.
Left, center and right containers
- The left container houses the site logo. It grows in size to accommodate a center and right-aligned menu, and shrinks to actual size accommodate a left-aligned menu.
- The center container houses the mobile menu toggle button, main navigation and vertical utilities bar.
- The right container houses the site search. It grows in size to accommodate a center and left-aligned menu, and shrinks to actual size to accommodate a right-aligned menu
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.
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.
- Relative - the header will scroll off-screen as the page is scrolled.
- Fixed - the header will stay at the top of the screen as the page is scrolled. Page content will scroll underneath it.
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.
- Header light theme - .coh-style-header-light-theme
- Header dark theme - .coh-style-header-dark-theme
- Header colored theme - .coh-style-header-colored-theme
If you would like to update the theme with different colors to match your brand, you can do one of the following:
- If you know the colors being changed need to be changed everywhere on the site, change them in Website settings > Color palette. This will then update all uses of the changed color.
- If you only want the changes to apply to the header component, add any new colors to your color palette so they can be reused, then update the relevant header theme custom style (Listed above).
Site logo
- Site logo - Upload your site logo. The image will always maintain its aspect ratio. Breakpointed width controls are provided to further restrict the width of the logo. The image will not exceed the height of the header. For example:
- If the uploaded image has a height greater than the header, it will automatically shrink down to the header height.
- If the image uploaded has a smaller height than the header, it will be displayed actual size.
- Alt tag - Provides a text alternative for the logo image that is read by screen readers and is displayed on the screen if the image doesn’t load.
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.
- Main navigation menu position - Choose from Left, Center and Right. The main menu will be horizontally-aligned according to the option selected. Menu links may wrap onto multiple lines if there isn’t enough horizontal space. If you do not want this to happen, consider reducing the width of your site logo and/or the number of top-level links in your menu.
- Drop-down menu columns - Select the number of columns you would like your second-level menu links to be split into, creating a mega menu style. If 1 is selected, the second-level links will display in a single column, so only use this option for smaller menus.
- Menu toggle button ARIA label - This adds a screen reader accessible label to the mobile menu toggle button. This button is visible from the tablet breakpoint down.
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:
- The header element (with class .site-header) - a container that wraps around all other header content.
- The horizontal utilities bar (with class .utilities-bar-horizontal).
- Three sibling containers labelled left, centre and right.
- The vertical utilities bar (with class .utilities-bar-vertical).
- A container that is a sibling to the .site-header.
Let’s go into these in a bit more detail.
Horizontal and vertical utilities bars
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.
Left, center and right containers
- The left container houses the site logo. It grows in size to accommodate a center and right-aligned menu, and shrinks to actual size accommodate a left-aligned menu.
- The center container houses the mobile menu toggle button, main navigation and vertical utilities bar.
- The right container houses the site search. It grows in size to accommodate a center and left-aligned menu, and shrinks to actual size to accommodate a right-aligned menu
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.
Site Studio