Sticky header bar problem

Support
#1

Hi,

I have created a header with top bar and side bar. The side bar has a small container as a button and the top bar is set to sticky. It looks fine initially, but when I scroll the sticky bar shrinks to give way to the bar on the side.

Screenshot-2026-05-07-at-09.30.31
Screenshot-2026-05-07-at-09.30.311000×345 31 KB
Screenshot-2026-05-07-at-09.38.42
Screenshot-2026-05-07-at-09.38.421000×357 31.3 KB

I have checked all the settings for the sticky bar and z-index of both of them and I just cannot figure out how to fix. Maybe you could suggest some solution?

Thank you!

#2

Hello @tashitendrel,

Thanks for writing to us.

To get rid of the issue, I would suggest you go to the Header Bar->Customize->Element CSS
Add this custom CSS code.

$el.x-bar-is-sticky{left:0!important;}

The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector, or you can subscribe to One where customization questions are answered.

Thanks

#3

Many thanks for this, Prakash!

#4

You are most welcome, @tashitendrel