New! Condensed Sticky Header and Utility Button
Columbia Sites is very excited to bring the condensed sticky header and utility button to all sites on our platform.
NOTE: The following behavior only affects desktop layouts. Mobile layouts are not changed.
Condensed Sticky Header
What is a condensed sticky header?
Columbia Sites condensed sticky header means:
- the header for your website stays in the same place on the screen when the user scrolls down the page and
- it becomes graphically condensed when the user scrolls down the page
When users scroll back to the top of the page, the header shifts back to its original form
Why are we introducing the condensed sticky header?
Sticky headers allow users to quickly access the navigation, search, and utility-navigation without scrolling up to the top of the page. They increase the discoverability of the elements in the header and the chance that users will take advantage of them.
How does a condensed header behave?
Current header behavior
Currently, when a user goes to a Columbia Site, the header is visible and disappears when users scroll down the page.
The header users see upon entering any page:
The header disappears once users scroll down the page:
New header behavior
The new condensed sticky header displays when users scroll down the page:
- The header text condenses
- The header remains pinned to the top of the screen
- The site logo disappears
- A home icon displays which, when clicked, brings users back to the Home Page
Utility Button
You can now add a utility button to the top of the page which displays the the right of the utility navigation. This button can either link internally to another page on your site, or externally to outside web content.
