How do I make sections sticky?

Shopify Discussion

Topic summary

After switching to an image‑based navigation (Mega Highlights Menu app), the announcement bar, page heading, and breadcrumbs no longer stay “sticky” at the top. The poster asks how to keep these sections fixed while scrolling and shares their site URL.

Suggested solutions:

  • Custom CSS in theme.liquid: add a style before that sets the navigation container to position: fixed; top: 0; width: 100%; a high z-index; background color; and padding. Identify the exact class used by the app/theme (e.g., .header or .navigation-wrapper) and apply the styles to that selector, then save and test. (“Sticky” = element remains fixed at the top during scroll.) A CSS code snippet was provided.
  • Use a third‑party app to add sticky behavior without code (examples: Sticky Menu by POWR; Hero Menu – Sticky Menu by Zotabox).

Outcome: No follow‑up confirmation from the original poster; the issue appears unresolved/awaiting implementation and testing.

Summarized with AI on December 24. AI used: gpt-5.
2

Hello @kettlecoffee

Option 1: Using Custom CSS

This method involves adding custom CSS code to your theme. It offers more control over the styling of the sticky element.

  1. Access Theme Code:
  • Go to your Shopify admin panel and navigate to Online Store > Themes.
  • Click on Actions > Edit code.
  1. Locate Theme.liquid File:
  • Look for the theme.liquid file within your theme code.
  1. Add CSS Code:
  • Paste the following code snippet before the closing tag in your theme.liquid file:

CSS

.sticky-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10; /* Make sure the element is on top of other content */
  background-color: #fff; /* Change background color as needed */
  padding: 10px; /* Adjust padding as needed */
}
  1. Identify Navigation Section Class:
  • In your theme code, inspect the HTML structure of the section containing the Mega Highlights Menu, announcement, heading, and breadcrumb navigation. Look for a unique class name assigned to this section (e.g., .header, .navigation-wrapper).
  1. Update CSS Code:
  • In the code snippet, you pasted earlier, replace .sticky-header with the actual class name of your navigation section.
  1. Save and Test:
  • Save your changes to the theme.liquid file and preview your store to see if the navigation elements are now sticky.

Option 2: Using a Third-Party App

There are Shopify apps available that can add sticky navigation functionality without editing code directly. Here are a couple of options:

  • Sticky Menu by POWR
  • Hero Menu - Sticky Menu by Zotabox