Headers

Header components come with pre-styled elements that resemble traditional header and navigation bars. They include a space for a logo, navigation, call-to-actions and have different styling on mobile sizes. Desktop navigation is independent of mobile, meaning the designer can select which navigation items are necessary for all screen sizes.

Implementation tip
Ensure the horizontal padding on .c-header__row matches the horizontal padding on .c-section for these headers to line up correctly to the grid.
Shop Online
Peter BouchierWholesaleContact us
0
0
Peter BouchierWholesaleContact us

Header with CTA

Simple header with logo only and right-hand side call-to-action area (phone number in this case). Layout changes on mobile portrait.

This is some text inside of a div block.
0800 010 010
0800 010 010

Header with navigation and CTA

The flex-basis of the logo (left) and cta (right) columns should be equal in order to centre the navigation links. Change the flex-basis of the logo and cta cols to match the width of the contents of the larger of the two columns.

0800 010 010
Text LinkText LinkText Link

Header with primary and secondary navigations and CTA

Header design suitable for multiple navigation item types with multiple navigation areas.

Implementation tip
On mobile, open the nav menu and ensure that the top edge lines up with the bottom of the CTA row by adjusting the menu's top margin.
Text LinkText LinkText Link
0800 010 010

Header with two navs and a CTA with “Available now” indicator

Header design suitable for multiple navigation item types with multiple navigation areas.

An “Available now” indicator is shown underneath the CTA element if the current time is within the company’s opening hours.

Implementation tip
Mobile nav menu:
On mobile, open the nav menu and ensure that the top edge lines up with the bottom of the CTA row by adjusting the menu's top margin.

"Available now” indicator:
Copy the contents of the HTML embed element and paste it at the bottom of the site's footer custom code. Then delete the embed element.

In the code, set the opening hours for each day of the week to match the company’s opening hours. Change the timezone if the company is outside of Melbourne time.

Once you’ve styled the “Available now” indicator, set the display property of .c-available-now to “none" in the style panel. The script will show the element on the published site if the company is open.
Text LinkText LinkText Link
0800 010 010
Available now