Making header container (not bar) sticky

[sgchan]

Hello,
I hope this is a simple question. How do you make the Header container (not bar) sticky? I’ve tried using position: sticky; top:0; on the container CSS but it doesn’t work. I just want the menu to stick at the top… not the Home logo.

Many thanks in advance.

[tristup]

Hi @sgchan,

Thanks for reaching out.
In that case, I would suggest you create two different headers bar one for the nonsticky and another one for sticky by following the below steps.

Step 1: Create a copy of the first **bar**.
Step 2: Duplicate the first **Bar** and delete the **Logo** from it.
Step 3: Make the second **bar** Hide initially.
Step 4: Make the second **bar** a sticky
Step 5: Set **content scrolling** off, **initial postion** set to **absolute** for the **Second Bar**. 

The above steps will make the second bar, which has only the menu and is set to sticky.

Hope it helps.
Thanks

[sgchan]

Hi @tristup
It’s nice getting your help again. I’ve tried as per your suggestion but the duplicate bar only appears once. Then it hides for good. Am I missing anything here?

[sgchan]

Please ignore the above. I’ve figured it out. There was a conflict with the CSS.

Regardless, thank you so much for your help.

[prakash_s]

Hello @sgchan,

Glad that we were able to help you. Please feel free to open a new thread if you have any more concerns.

Thanks