Content being hidden behind header

Support
#30

Hi Rue,

Yes, I think we’ve already talked about this issue before and you’ve told us that you’ve decided not to make the header stick on mobile sites, even though my coder confirmed to me that this is a normal thing for most sites. I’ll ask my coder again about what specifically she might have done before. We’ll try out the solution you’ve provided but to be sure that I didn’t misunderstand you, does the fix you’ve provided make sure that the header stays at the same size? Or that the content is never hidden behind it? Which is the problem as the site makes a jump when you start scrolling because the content only starts being displayed behind it then.

Cheers,
Andreas

#31

My coder has now applied the code you’ve provided but it seems to have only fixed the jumping issue on mobiles. When you click on a link while on a mobile phone the site still scrolls down too far there, with part of the site being hidden behind the header. Could you provide a fix for that as well? The code you’ve provided before had already fixed it for the desktop version.

Cheers,
Andreas

#32

Hey Andreas,

This mobile issue is not a bug. X or the Classic Header in Pro doesn’t really support the Fixed Top Header on mobile. Since it’s not a bug, this would need custom development which is beyond the scope of our support. We can’t give further codes to make the header sticky on mobile while making the offset work.

We previously have received feature requests to make X support sticky header on mobile and the answer is the Pro theme. One of the reasons Pro was built is to allow users to have a custom header and do stuff that can’t be achieved with the X Header.

What you can do is upgrade to Pro as Pro supports a mobile sticky header. The best part is, all the issues in this thread do not exist in Pro Header so if you upgrade, you can remove all codes that were given here and just use Pro’s Sticky Header option. I just tested the latest version of Pro to double-check there’s no issue with the Sticky Header feature.

Thank you for understanding.

Smooth scroll on one page website
#33

Hi Christian,

I see. So would that change the site in any way if we did that upgrade now that it’s already almost finished? Aside from the issues we’ve had to deal with?

And why exactly do you offer these 2 different versions at all, with the normal version having some bugs the other doesn’t and the Pro version offering features that you for some reason have left out of the normal one? If I had known about that I would have bought the Pro version from the start. And if it’s possible to just upgrade to that theme and have all these problems fixed without relying on code for it, then I’d do so now if you can confirm that there won’t be any problems that switch could cause. Cause I’d really like to avoid having to deal with any new issues.

Cheers,
Andreas

#34

Hey Andreas,

To your question:

You basically just need to create a Pro sticky header. You can check out the documentation of the Header Builder in our Knowledge Base.

Pro allows users to create a custom header. X only has a few header design options.

Regarding the menu bug in X, that is unintentional. We’re very sorry about that.

I assure you the problems would be fixed because I tested the latest version of Pro in my test sites and the “smooth scroll to section and header offset” works both in desktop and mobile.

In case you’ll have a problem with creating a Pro header after upgrading, give us WordPress Admin access in a Secure Note and we’ll help you set up the header.

Thanks.

#35

Hi Christian,

I’ve just got a reply from my coder and as she says, for one it would take her quite a few hours to set up the header again because it’s much more complicated in the Pro version and she has to do it all over again from scratch. And as she’s also said and I’ve confirmed for myself, part of the page is still being hidden behind the header after the page has scrolled down when you click on a link. And maybe even on the front page as well. I’m not sure why that’s the case as it seems that she’s already started creating the new header and you’ve assured me that the issue shouldn’t be there in this theme version. So I’d appreciate it if you could look into this. You’ve also offered to help us set up the header in the Pro version and if it helps us save time and to fix everything then I can provide you with the login details for the site.

Cheers,
Andreas

#36

Hey Andreas,

Yes, please provide access to your site in a Secure Note and we’ll look into the Pro header problem.

Thanks.

#37

I’ll attach the login details to this reply.

#38

Hey Andreas,

What caused the offset issue this time is the Shrink Amount was set to 0. I’ve set it to 1. That setting should not be set to 0 as what that does is shrink the height of the header when it becomes sticky and the offset relies on the header’s height.

I’d also strongly recommend for your developer to review the custom CSS and JS as one of the code adds it’s own scroll effect which affects the scroll animation of our theme. Please watch the video in the secure note so you could see what your site looks like and behaves without any custom code in comparison to adding the custom codes.

As much as possible, use the options available in Pro options.

Hope that helps.

#39

The video you linked to says it’s unavailable as it’s set to private.

#40

Sorry about that. It’s unlisted (only available for you and the support team) now so you can watch it.

#41

Hi Christian,

My coder has encountered another problem, namely that the header on the mobile version of the page seems to be the same as on the desktop version and the menu has disappeared as well. Can you provide a solution for that?

Cheers,
Andreas

#42

Hey Andreas,

That is normal. The Navigation Inline will not automatically change to a mobile nav like the Classic (X) Header. In Pro, you need to hide the Navigation Inline element using the Hide During Breakpoints feature and show a Navigation Collapsed or a Navigation Layered (only differs in method to open the submenu) element in its place. The Hide During Breakpoints feature is available in all non-Classic elements.

Now that you know this setup, one big advantage of Pro is you can set a different screen size to show a collapsed menu. An example of that is collapsing a long menu earlier.

-----------------------------------------------------------------------------------

Though this mobile nav menu is still part of your header problem, it is no longer connected to the original problem which is “Content being hidden behind header”. It’s okay if I answer the thread. But, if another support staff takes this thread, s/he might get confused as this is a very long thread.

It’s strongly recommended to open a separate thread for issues that are not connected because mixing topics in one thread often lead to confusion and results to delayed response.

Hope that helps.

#43

Hi Christian,

I understand your concerns, but at this point I’m really hoping that we’d finally be done fixing the problems and this seems like the last one at the moment. I’ll pass your instructions on to my coder and will let you know if anything else comes up.

Cheers,
Andreas

#44

Thank you for understanding, like Christian said, please write it on a new thread if you have a follow-up question or a different issue.

Have a nice day,
Cheers!

#45

Hi,

This is about an issue that I’ve already addressed before, namely the hashtags appearing at the end of the domain after clicking on any links to the page. The site only scrolls to that section so there’s no point to these hashtags. And most sites don’t have them either.

From what I remember you’ve said that you didn’t provide an option to disable them because you saw no reason for it. Now that we’ve switched to the Pro version of the theme, is there still no option for that here? If not, would you have any other solution for that? My coder would otherwise fix it with some custom code.

Cheers,
Andreas

#46

Hey Andreas,

Adding the hashtag to the URL is the default behavior of a Jump Link. Before, like other themes, we did not include the hashtag. We later realized that it’s important because if a website user wants to save the section of your page, without a hashtag, s/he won’t be able to go back to the section easily. S/he will have to inspect the code and copy the ID of the section. We just restored the default behavior of the browser. We just added the scroll animation and header offset.

Please visit the links below to know more about the Jump Link and its benefits.

-----------------------------------------------------------------------------------

If you still don’t want it though, feel free to have your developer override it. We don’t have the code for that and please just note that we will not support issues that arise from customizations.

Thanks.

#47

Hi Christian,

Yes, you’ve explained this before, and yet I don’t remember seeing any other sites that do this. So what I’m wondering is why you didn’t make this an option that people can enable or disable easily but have made it mandatory instead. But I’ll tell my coder to get rid of it with code. And maybe you could pass on the feedback to make this an option in a future update.

Cheers,
Andreas

#48

Hi Andreas,

Yes, you got a point, I have added this as a feature request option to append or not to append the hashtag ID for One-page navigation. All of these requests are discussed with our team internally and prioritized based on the amount of interest a particular feature might receive, and please keep in mind that our Dev Team needs to consider a lot of things, implementing a new feature is not easy as it may sound.

Have a nice day,

#50

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