How do I make sections sticky?

[kettlecoffee]

I changed my navigation menu to an image-based one provided by an app (Mega Highlights Menu). Neither that section, announcement, heading, or breadcrumb navigation are sticky at the top of the page. 

My site is: https://www.kettlecoffee.storesuccessful

What do I need to do to make these sections sticky?

Thank you for your help.

[magecomp]

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 </head> 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