X Theme Pro Header - Not Staying at Top of Page When Viewed on Mobile

Hi, I’ve been in touch before about the Pro Header version and you’ve helped me with doing a responsive version which I’ve done, but instead of it staying fixed at the top of the page when I scroll down, it moves to about half way down the screen! I have no idea what I need to do to make it stop at the top!

I’ve included a screen grab to show you.

I’ll also include the login details in a secure note in case you need them!

Thanks!

Hey @core365,

This is a known issue if you have multiple bars and some are hidden and some are fixed. So with your setup, I’d recommend that you not use the sticky option for any of your bars for now. Otherwise, you would need complex custom CSS to achieve what you need.

Having a tall sticky bar is also not recommended for UX because in smaller screens, it covers a large area at the top and your users are left with a small area to view your content.

Thanks.

I’m experiencing a small bug also in this vein, but it is noticeable enough that I’ll have to either fix it or abandon the header builder altogether.

I have two bars, both sticky. I don’t need them to do anything special other than stay fixed in place - one right under the other.

You can see at our test page: https://www.test.betdsi.com/sandbox/ that the second bar jumps slightly when you start to scroll. The effect is even more pronounced on mobile. It corrects itself after a second of scrolling, but the effect is jarring to the eye and there’s no way our client will sign off on a bug that noticeable on every page.

Is there a way to achieve our two-tiered header in a single bar? I’m happy to explore other options that might be built from a better process.

Thank you :slight_smile:

Hi there,

Thanks for writing in.

Try setting your second bar’s offset equal to the negative value of first bar’s height. Your first bar height is 60px, so try setting your second bar’s offset to -60.

Thanks!

1 Like

Just replying to keep this thread live. Once I am able to regain access to the site, I will try your suggestion first thing.

You don’t need to reply often :slight_smile: Just make sure to let us know before 10days and your thread will automatically close. Thanks!

1 Like

Hi @christian_y

I need the top bar, logo and nav bar to remain fixed on screen when viewed on a mobile device. The height of it isn’t relevant to what I’m asking. If I was using the non Pro version of X Theme I’d be able to do this no problem. The Pro version costs more, and because of bugs and issues, what I want to do isn’t achievable - is this correct?

Thanks

Hi there,

Unfortunately, your case is 3 bar case scenario which will be more complex and there is no distinct workaround available and you will need to have the bug fixed to be able to use the sticky bars that way.

There is a temporary workaround mentioned in this video:

But I am not sure if it can be applied to your case.

Thank you.

Please open up a separate thread to follow up your case. You are not the original poster of this thread and if there is a need for login information the original poster can see all the secure notes here.

Please open up a new one so that you will be the original poster.

Thank you.

Hi, I’ve watched the video and can’t see what the temporary workaround is.

Can you let me know when the bug will be fixed, as it’s been weeks since there’s been an update to sort any issues out and all these workarounds keep just adding time and hassle onto building a website, as I have to keep asking yourselves for help on various things. I could understand it being like it for a couple of weeks after the initial release of an upgrade, but this has gone beyond that and no issues that I have raised with various bugs have been rectified.

Cheers

Hi there,

We’re not sure when it will be fixed, but our developers are already aware of this issue. I also tried some workaround but it’s glitchy and it won’t position smoothly.

How about just adding all of those elements within mobile header bar? There is no need for header bar if the elements you’re displaying are fixed with the stacked layout. Then with one header, maybe you can use CSS workaround to position it on absolute top.

Thanks!

Hi @Rad!

I’m not too sure what you mean by putting all the elements within a mobile header bar instead of header bar - this is the first time I’ve used the Pro version and it’s proving to be much harder than I thought it would to just do a header bar, so any help is much appreciated!

Thanks!

Hey There,

Thanks for writing in! @Rad’s suggestion states to add all your elements in one bar for the mobile. It means that the text and the logo is placed in the same mobile bar and not on the separate bar. This should lessen the height of the bar or it will display it at the top of the page on a smaller screens.

Hope this helps. Please let us know how it goes.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.