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.

February 09, 2023

Condensed Sticky Header

What is a condensed sticky header?

Columbia Sites condensed sticky header means:

  1. the header for your website stays in the same place on the screen when the user scrolls down the page and
  2. 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:

Current Header


The header disappears once users scroll down the page:

example of header not displayed on scroll

New header behavior

The new condensed sticky header displays when users scroll down the page:

  1. The header text condenses
  2. The header remains pinned to the top of the screen
  3. The site logo disappears
  4. A home icon displays which, when clicked, brings users back to the Home Page
condensed header

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.

interface to Utility Button

Be Among the First to Get News About Updates

* indicates required