Stickying a Custom Liquid

[tdr-solsant]

Hi everyone, on the following page I have created a custom liquid to display a sub-menu that anchor-scrolls to different sections of the page. How can I sticky this section to the top so that it always appears while you scroll down the page?

Thanks in advance!

https://chirp-protect.com/pages/what-is-chirp-protect

(Video Explainer  /  How it Works  /  3 Key Components)

[steve_michael2]

Hi @tdr-solsant 

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

.nav-desktop__tier-1 {
    width: 100%;
    height: 17%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 50px;
    padding: 0 32px;
    margin: 0;
    list-style: none;
    position: fixed;
    top: 107px !important;
    left: 0px;
    z-index: 1000;
    background-color: white;
}

If my reply is helpful, kindly click like and mark it as an accepted solution.

If you are happy with my help, you can help me buy a COFFEE

Thanks!

[tdr-solsant]

Thank you @steve_michael2 . Do you know how I can push the text to the right?

I tried changing the code to "left: 500px" which pushes it along to where I want, but pushes the whole section along and so you can see the rest of the page content behind it!

[PaulNewton]

Hi @tdr-solsant 👋 in  custom-css setting try the following with the main masthead NOT sticky:

#main > .shopify-section shopify-section--custom-liquid {
  position: sticky;
  top: 0;
  z-index: 1;
}

⚠️💣If both this AND the masthead are sticky that's making customers loose a lot of screen real-estate to UI noise.

Dynamically toggling them off based conditions requires javascript.

If you need this customization further then contact me for services.
Contact info in forum signature.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.