技术求助：为Reel主题网站实现双粘性元素（导航+分类栏）堆叠

Hey Ben, let's get that filter bar locked to the top alongside your sticky main navigation—this should be straightforward with a bit of custom CSS. Here's how to do it step by step:

Step 1: Identify the Filter Bar's CSS Selector #

First, we need to target the right element. Open your site in Chrome/Firefox, hit F12 to open DevTools, then use the element picker (the arrow icon in the top-left of DevTools) to click on the "Our Programmes" filter bar. Look in the DevTools panel to find its unique class or ID—for the Reel theme, it's likely something like .wpzoom-reel-programs-filter or .programs-filter-container. Jot that selector down.

Step 2: Add Custom Sticky CSS #

Head to your WordPress dashboard, go to Appearance > Customize > Additional CSS, then paste in this code (replace the selector with the one you found in Step 1):

/* Sticky Our Programmes Filter Bar */
.wpzoom-reel-programs-filter {
  position: sticky;
  top: 80px; /* Adjust this value to match your main navigation's height */
  z-index: 1001; /* Ensures it stays above content but aligned with your sticky nav */
  background-color: #ffffff; /* Match your site's background to avoid transparency gaps */
  width: 100%;
  border-bottom: 1px solid #e5e5e5; /* Optional: Adds a subtle border to separate from content */
}

Key Adjustments: #

• Top Value: If your main navigation is 70px tall, set top: 70px—this prevents the filter bar from overlapping the sticky nav. You can check your nav's height using DevTools too.
• Z-Index: Make sure this is higher than regular content but matches or is slightly above your main nav's z-index (usually 1000, so 1001 works).
• Background Color: If your site uses a dark navigation, swap #ffffff for your site's background color to avoid a transparent bar.

Step 3: Fix Potential Parent Container Conflicts #

If the filter bar still doesn't stick, the most common issue is a parent element with overflow: hidden (sticky positioning fails if any parent has this property). Use DevTools to check the parent elements of the filter bar—if you find one with overflow: hidden, add this CSS to override it (replace .filter-parent-container with the actual parent selector):

.filter-parent-container {
  overflow: visible !important;
}

Step 4: Test and Tweak #

Save your custom CSS, then refresh your site and scroll to test. Adjust the top value or styling as needed to get the perfect alignment with your sticky main navigation.

If you run into issues, drop a screenshot of the DevTools element inspector for the filter bar, and I can help refine the code further!

内容的提问来源于stack exchange，提问作者Ben Haines