Mastering Sticky Headers on BigCommerce Cornerstone: A UX-First Approach

Mastering Sticky Headers on BigCommerce Cornerstone: A UX-First Approach

A sticky header, visible at the top of the screen as users scroll, enhances navigation and user experience by keeping crucial elements accessible. A recent BigCommerce forum discussion highlighted this common request for the Cornerstone theme, revealing important considerations beyond basic implementation.

The Basic CSS Solution for Sticky Headers

The thread began with a query for a sticky header on desktop and mobile for the Cornerstone theme. While Cornerstone typically provides a sticky header on mobile, desktop requires custom CSS. BigCommerce partners Daniel Olvera and Sajid Jameel provided the straightforward solution:

.header {
  position: sticky;
  top: 0;
  z-index: 999;
}

This CSS uses position: sticky to make the header adhere to the viewport's top (top: 0) and z-index: 999 to ensure it overlays other content.

Implementing the CSS on BigCommerce

You can add this CSS to your BigCommerce store via:

• Storefront > Custom CSS: Paste the CSS directly.
• Script Manager: Create a script, set placement to Head and load on All Pages, then paste the CSS wrapped in
• Theme File Editor: For developers, edit theme files (Storefront → My Themes → Edit Theme Files). Add the CSS to assets/css/theme.css or embed the