Sticky topbar on desktop and mobile

Support
#1

Hi there,

I have come across some issues with the desktop and mobile versions of making the topbar sticky along with the navbar. I have managed to make the topbar/navbar sticky - but when you load the page the navbar is slightly higher up ‘underneath’ the navbar, maybe by aboout 20 pixels. When you scroll down, it fixes itself and repositions. On mobile, the navbar being ‘underneath’ the topbar is even more prevalent - it seems to be under it by at least 50 pixels.

The url is here
http://www.simplysignspreview.com/alist2/

Please let me know what I should do. Many thanks.

#2

Hi There,

Please add the following CSS under Customizer > Custom > Global CSS:

@media (max-width: 979px){
    .x-navbar.x-navbar-fixed-top {
        top: 58px;
    }
}
@media (max-width: 767px){
    .x-navbar.x-navbar-fixed-top {
        top: 69px;
    }
}
@media (max-width: 630px){
    .x-navbar.x-navbar-fixed-top {
        top: 94px;
    }
}
#3

Hi there,

Much appreciated, but sadly the code has not done anything.
Please have another look for me, sorry for the trouble.
I have left it in customiser so you can see if there are any errors.
Many thanks.

http://www.simplysignspreview.com/alist2/

#4

Hi there,

You can’t set your top bar to fixed position, it’s not part of position-calculation feature that navbar has. So yes, it can’t be done with just CSS.

What you could do is have Pro theme and build your own header, in there you can have multiple header bars for the top bar and navbar, then have them set to Sticky.

Thanks.

#5

Hi there,

Thanks for getting back to me. I have just checked out Pro, never seen it before. It looks amazing.
I have always struggled with headers out of the box in X, and an excited to see this functionality.
Is this a stand alone theme, or does it work alongside the X theme?

Can it be used with any other themes aside from X?

#6

Hi there.

Pro is a standalone theme separate from X. The main difference is that Pro provides the header and footer builder feature that provides extensive options that you can use.

You can find more option here. Also, there are introductory videos for the header and footer builder here.

Hope this helps.