How to make sticky menu stay on scroll

Support
#1

Hey there,
I’d like to make my sticky header to stay the same after I start to scroll. right now the sticky header is styled and kinda “collapsed”, but when I start to scroll down the header is expands again. please have a look.
Thanks for your help!

#2

Hi There,

Please add the my-sticky-bar class to your bar:

After that add this custom CSS under Theme Options > CSS:

.my-sticky-bar.x-bar.x-bar-fixed {
    margin-top: 0;
    width:  55em !important;
    left: 50%;
    margin-left: -27.5em;
}

Hope it helps :slight_smile:

#3

thank you, now something weird is happening once the sticky bar is activated on scroll. Please have a look :slight_smile:

#4

Hey There,

I’ve just updated the custom CSS to this:

.my-sticky-bar.x-bar.x-bar-fixed {
    margin-top: 0;
    width: 55em !important;
    left: 50%;
    margin-left: -27.5em;
    height: 7em !important;
}
.my-sticky-bar .x-bar-content {
    height: 7em !important;
}

Could you please have a look?

Regards!

#5

thank you looks great, but the content below the bar behaves weird as it “jumps down” as the sticky bar is activated. please have a look and scroll down the page

#6

Hi There,

Thanks for writing in again!
The issue you have mentioned is a known bug for sticky header. Its already in our bug tracker, our development team is looking at it.

Thanks

#7

:frowning: this issue is known since january. there got to be a solution, since the content below is pushed down by the amount of margin, that is taken away from the bat above it

#8

Hi There,

I will forward this concern to our development team for a quick solution.

Thanks for your understanding!

#9

guys I fixed it!
You just need to add the negative margin to the bar above and now everything works perfectly

#10

Glad that you figure it out.

Thanks