Creating a sticky navigation bar

Store Design

Topic summary

A user seeks help creating a sticky navigation menu bar that remains fixed below the header while scrolling, similar to the reference site lesdeux.com.

Two solutions have been provided:

CSS-based approach (mageplaza-cs):

  • Measure the current header/nav height (44px in this case)
  • Apply CSS to the menu bar:
    • position: sticky
    • top: 44px (matching header height)
  • Save and preview changes

Alternative implementation (namphan):

  • Edit the theme’s base.css file
  • Add sticky positioning to #main-collection-filters with:
    • position: sticky
    • top: 0
    • z-index: 2 for proper layering
    • White background for visibility

Both solutions use CSS position: sticky property without requiring apps. The discussion remains open for follow-up questions or clarifications.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
1

Hey there,

Does anyone know how to either code or an app that can create a menu bar like this that always stays under the header? The refrence website is https://lesdeux.com/collections/all and my website is www.renssnce.com

renssnce_0-1735256604410.png
renssnce_0-1735256604410.png389×847 42 KB

2

Hi @renssnce ,

I am from Mageplaza - Shopify solution expert.

It can be achieved with CSS easily if you already have a menu bar. Here are the steps:

  1. Get the current height of your nav; it is 44px in height.

    mageplazacs_0-1735283170828.png
    mageplazacs_0-1735283170828.png1919×931 345 KB

  2. Add CSS for your menu bar:

.menu-bar {
    position: sticky;
    top: 44px *equal to your nav's height*
}​
  • Save the changes and preview your homepage.

I hope this helps, please leave a comment if you need further instructions !

3

Hi @renssnce ,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

#main-collection-filters {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 2;
    background: #fff;
}