Content being hidden behind header

Support
#23

But if I remember correctly my coder has already done that and told me that the issue was still there, even in that stable version. So maybe it’s something different that what you’ve thought.

Anyways, she’s tried the custom code that you’ve provided and said that it’s managed to fix the problem. Now the only concern I have is if this will cause any problems if for example you do fix it at some point. Would that mess up the site somehow until we remove the code again? At worst we might even have to do more than just remove it, I assume. But if it was just removing that code then I could probably even do it myself, if I know where to find it. But yeah, if you could provide some info on that. Otherwise I’ll now go ahead and tell my coder to use the code so we can finally get this fixed, and adjust the site accordingly based on how it should look and work.

#24

Hey @spektukal,

I’m very sorry again for having just figured out that I have a similar custom JS in my stable version test site so I didn’t catch that the issue even started earlier in X 7.0.4.

This means that there’s no other way but to use the custom JS. You need to remember to remove it when this is finally officially fixed though because that might cause issues. It would not be good that both theme and custom code add functionality to the menu. When giving the custom code, Ben thought that not using the One Page Navigation would disable our theme’s smooth scroll and header offset feature. But, that is not the case because the feature was made global several versions ago. It’s just that a bug was introduced after X 6.5.6.

Thanks.

#25

Hi Christian,

I need to make another inquiry because while the code you’ve provided has fixed the issue with the content being displayed behind the header on desktops, it still seems to be around on mobiles. And it’s even worse there because the way it looks the content is not initially hidden behind the header. But when you start scrolling down that changes and so the site suddenly jumps down a bit. If you could provide a solution for the mobile version of the site as well that would be appreciated. And I hope having 2 custom codes for basically the same issue won’t create any more problems, by interfering with each other in any way.

Edit: And here’s a note from my coder:

The issue is:
On desktop the content is no more hidden behind the header but on mobile it is. In the custom Js code we are using :

scrollTop:($section.offset().top - $(’.x-navbar-wrap’).outerHeight())
to fix the issue.
On desktop .x-navbar-wrap is ‘90’ so it is working fine.
But on mobile .x-navbar-wrap is ‘0’ thats why it is not working on mobile.

I’ve already asked her just now but haven’t got a reply back yet, but I assume setting the number from 0 to 90 wouldn’t fix the issue, would it? Seems too simple.

Cheers,
Andreas

#26

Hello Andreas,

Because of this CSS block, the height were reset to 0.

@media (max-width:979px){
  body.x-navbar-fixed-top-active .x-navbar-wrap{
    height:auto;
  }

  .x-widgetbar{
    left:0;
    right:0;
  }
}

Please have this updated and only use this code:

@media (max-width:979px){
  .x-widgetbar{
    left:0;
    right:0;
  }
}

The .x-navbar-wrap should be back at 90-pixel height.

#27

Thanks, I’ve passed it on to my coder.

Cheers,
Andreas

#28

I’ve got a reply back from here. I’ll just paste it here:

"They have mentioned to remove a css property from their theme generated css file. Can you please ask them from where to do that? As that would mean altering the parent theme file which is not a good option for future theme updates.

I know where to remove that but it can be achieved by modifying the parent theme file, so i will do that only if you or theme support says to do so."

So as she says where is she supposed to remove that file and what effect could this have on the theme when it gets updated in the future? Would this fix get overwritten when you update the theme or could it cause any other issues? A solution that doesn’t create more problems would be appreciated.

Cheers,
Andreas

#29

Hey Andreas,

Normally the navbar is not in fixed position in smaller screen. You may have modified the styling which made it fixed, the best solution we can have to this for smaller screen size is to use this code:

@media (max-width:979px){
  body.x-navbar-fixed-top-active .x-navbar-wrap{
    height: 90px !important;
  }
}

This code will force a 90 pixel height of the navbar wrap when the screen is smaller.

Hope this helps. Kindly let us know.

#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.