Content being hidden behind header

Support
#3

Hi Kory,

Sure. I must have forgot about it since I’ve already made 2 threads for other issues on the site in the past weeks. But you can find the site here: logopaedie.iwebflix.com

Cheers,
Andreas

#4

Thanks for that, @spektukal! So there’s a couple things going on here, hopefully I can help explain everything clearly and point you all in the right direction on this.

As for the header appearing to cover content (both with the intro image and the sections as you click the links and it auto-scrolls), everything is working as it should. As you can see from this screenshot here showing an overlay of where your content starts after the header, you’ll see it starts right below the header:

The reason why the image here appears to be “cut off” as you mentioned simply has to do with the CSS being used to make the image span the entire dimensions of your section. By default, the advanced background images used in the theme use background-size: cover in CSS, which effectively does what it sounds like it should do: ensure that the image should cover all available space of the parent section it’s in. Alternately, if we were to use something like contain as a CSS value, you can see the actual dimensions of the image used:

So we can see in this example the image is “contained” by the section, which keeps the image’s actual proportions, showing us that we’re using more of a “portrait” orientation here rather than “landscape” to match the section layout. However, just cropping your image to landscape does not ensure that all parts of a background image will be visible at all times on all devices at all breakpoints. When using cover for actual photos used as background images (which is what is used 99% of the time for photos as background images), you cannot ever expect the entirety of the image to be seen at any given time. The image will constantly be grown or shrunk to ensure that it is covering the whole section properly. Background images should be thought of as more decorative elements, not actual content. You can’t expect to always see the whole thing, so you need to be okay with it moving and shifting to fit its container. The best you can do to see more of the image in the way you want is crop it down to more of landscape orientation, which will mean it doesn’t have to grow as much horizontally and “cut off” as much of the top and bottom, but remember that the image will constantly be growing and shrinking in this configuration, it is simply the natural behavior of such a setup.

As for the one page navigation links, it does appear that there is an error in the JavaScript calculation that should account for the header height and offset the scroll position by that much when clicking. I have put in an issue into our bug tracker for us to address this in a future release. Thank you for bringing this to our attention. While we cannot specify the exact time that we might be able to fix this, you can keep an eye on our changelog which should mention this once we are able to get to it.

Thank you.

#5

Ok. But can you provide a workaround for the issue with the links for the meantime? What kind of timeframe are we speaking of for you to fix the bug? Weeks? Months? Days? I’d like to finish up the site now and wanted to make some adjustments to the size of some sections. But I can’t really do that now if the issue is still there, and when you eventually fix it that would change the site’s layout again, wouldn’t it? At least when clicking on a link. So a solution that can fix this problem now without causing more problems in the future, through updates or anything else, would be great.

Cheers,
Andreas

#6

Hi Andreas,

Unfortunately, we cannot promise a timeline. But I do have a workaround for you. The good news is you can set a standard padding to your sections. And when our fix (update) arrives, it’ll be easy for you to remove this workaround and use the fix instead.

Here are the steps:

1.) Make sure not to set the current page as a One-Page Navigation type of page.

2.) Also please make sure that you set this menu as your Primary Menu.

3.) Once those are done, your coder can add custom JS either to the page or Theme Options > JS. Here’s a code snippet you may try using:

jQuery(document).ready(function($) {
  function scrollToSection(event) {
    event.preventDefault();
    var $section = $($(this).attr('href')); 
    $('html, body').animate({
      scrollTop: ($section.offset().top - $('.x-navbar-wrap').outerHeight())
    }, 1000);
  }
  $('.menu-item a').on('click', scrollToSection);
}(jQuery));

What we’re essentially doing is putting our theme’s code responsible for the one-page navigation to “sleep” and letting this new custom code operate. This way, there’s no conflict.

Hope this helps.

#7

Hi benursal,

What do you mean by “disable one page navigation”? It is a single page layout, so what would disabling that setting do?

But if we set up this padding, would it work equally well on all resolutions and all devices? Cause from what I understand the header doesn’t have the same size on all resolutions, which is why my coder hasn’t been able to fix this easily yet.

And Ideally I would like a solution that doesn’t require me to go back and change part of the site again after the project is done. Especially if it might be several weeks or even months from now. So what would happen after you’ve fixed the issue if the padding is still there? Would it change the layout or scrolling behavior of the site again until the code is removed? Or would it just remain as it is until we go back and enable the one page navigation again?

Cheers,
Andreas

#8

Hey Andreas,

  1. Please disregard the One Page Navigation step as it is really our X Menu “Smooth Scrolling and Offsetting the Navbar Height” feature that is currently broken. This is regardless the One Page Navigation feature is used or not as the One Page Navigation is now just a way to set a different menu for a page. The Menu Smooth Scrolling and Offset is globally. This means that it applies to all jump links. If you wish to learn more about the feature though, you can visit this link: https://theme.co/apex/forum/t/features-how-to-setup-one-page-navigation/96

  2. Putting the custom code on will make your site work now but you need to remove it once the fix is up. If you need the new features of our theme and builders, you regretfully need to apply the code. If not, read on.

  3. Regarding the padding, I’m not exactly sure of Ben’s intention but I believe you don’t have to edit the padding anymore.

Another solution and this is the one I’d recommend if you don’t need the new theme features, is to downgrade to the stable version of X and Pro where this bug wasn’t introduced yet. You download the previous stable version in your Dashboard: https://theme.co/apex/dashboard

You can downgrade either by using the Manual Update method here: https://theme.co/apex/forum/t/setup-updating-your-themes-and-plugins/62. It says update but it can be used for downgrade too.

Or, you can downgrade by deleting X and Cornerstone and uploading the previous version of X and X will prompt that you install Cornerstone. X will do the installing for you so no need to upload Cornerstone.

Thanks.

#11

Hi Christian,

So the downgrade to the last stable release sounds like the best option. But what exactly would that change about the site? What features or updates have been made in the versions after that and how would that affect the site we’ve built so far?

Also why is the standard download not the stability release? Normally companies call unstable releases experimental or something like that and warn people to use them at their own risk. I wasn’t even aware that the normal download does’t contain the stable version until now. So I’m wondering if it’s possible to only have updates for the stable version applied automatically. Since after the site is done we won’t be needing any new features anyway, and if it helps avoid introducing any bugs then that would be the best choice.

But assuming that reverting to an older theme version does have any negative effects on the site, the other option you mentioned would be to still use that custom code and then remove it later, is that right? Since you didn’t mention it I assume there is no way to just disable the “Smooth Scrolling and Offsetting the Navbar Height” feature, right?

I guess we’ll try installing the last stable release of the theme and hope that it doesn’t cause any problems.

#12

Hey Andreas,

Here are the answers to each of your questions:

Downgrading will make the smooth scroll and Navbar height offset of our theme’s menu to work because this recent bug with the new version does not exist in the previous stable version yet. It’s not feasible to answer what else would change as the changes are too numerous. You can compare the version features by reading our Changelog though. See https://theme.co/changelog

The latest version isn’t experimental anymore. It underwent the “experimental” mode though and that time it was is called the beta testing or using the beta version. Our beta users test that version. The latest version will be the next stable version when all bugs that weren’t discovered or were impossible to discover during the beta testing phase are ironed out and we receive no more bug reports.

No. Reverting to the current stable release will fix the menu issue so you won’t need the code provided here.

There is no way to disable the “Smooth Scrolling and Offsetting the Navbar Height”. It’s a global feature of our themes.

In order for you to avoid the risk of breaking your site whether when upgrading or downgrading something, copy your site live site to a staging server and do the testing in your staging site.

Hope that helps.

#13

I assume a full backup of the wordpress installation would do the same job, right? But I’ve passed the instructions on to my coder and will let you know in case any new problems come up.

#14

Sure, please let us know. And yes, full-backup installation is okay too.

#15

Hi,

My coder has followed your instructions and installed the last stable version and as she says the issue is still there. So is the problem a different one from what you’ve thought or was it already present in that version as well?

Cheers,
Andreas

#16

Hey Andreas,

Thanks for testing. I don’t see content hidden by the header and the header offset when clicking on a jump link is working. Please check the screenshot below. You’ll see that the page stopped scrolling at the exact spot below the header. I’d say the padding is huge though so maybe you think that’s included in the issue? Please reduce the top padding.

I do see another page scrolling custom JS in your page though and that’s interrupting the page scroll feature of our theme. Please remove page scroll related custom JS in Theme Options > JS.

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

The latest version of our themes now includes the fix for this problem which is this:

You might want to try it out as well. When testing, please remove custom scripts and third-party plugins so that you will be only dealing with our theme’s functionality and therefore we know if the issue is with our theme and not other factors.

Thanks.

#17

So you’ve managed to fix it already after all? I’ll pass on what you’ve said to my coder. I did check the site and noticed that it still does scroll too far down when clicking on a link in the header. But I don’t know what might be causing it. Hopefully we’ll get it solved now.

Cheers,
Andreas

#18

Hey Andreas,

Yes, our development team was able to officially fix it.

Regarding this:

It’s likely because of the padding which I’ve shown you in my previous reply.

Thanks.

#19

Hi,

So apparently the custom code you saw was the fix that you guys recommended as a solution. I’ve specifically asked my coder to try it on a copy of the page on a sub domain but it seems that she’s put it on the main page anyway. Sorry for that. But she said that she’s removed that code now and updated the theme to the latest version and that the problem is still there. So could you take another look now to see what the problem is? I’ve asked her again specifically about the padding you mentioned as she hasn’t mentioned it in her response. I hope that she’s looked into that as well and just forgot to mention it, but if not let me know. Or I’ll let you know when I get a reply from her.

Cheers,
Andreas

#20

Hi Andreas,

Thank you for your reply. I check the website and the problem is still the padding of the sections. You can see the result in the screenshot below and the section that shows in green:

Please kindly contact your coder and ask her to adjust the padding of sections.

I also found out that the way your developer tried to add padding is not recommended:

She added a global CSS code and forced all the sections of the website to have 100 pixels padding. Instead, the developer should use the sections padding options for each section and set it properly for each case:

Some sections have titles for example, which will require a little bit of padding, but some do not have titles and they might need more padding. In general, it is a good idea that you guys decide the padding of each section depending on the content inside, and avoid adding general code regarding the case.

I suggest that you work with developers that are familiar with the theme options to avoid such cases.

Thank you.

#21

Hi Christopher,

It seems to me that you have misunderstood the problem. Or that I have misunderstood what you meant by padding. The issue is not the extra room on any sections. Please check out these 2 screenshots:

The first one shows to what point the site scrolls down to when you click on the Therapie link in the header. The top of that section is covered by the header and this is what we are looking to resolve. So the site stop scrolling down that far and basically only displays any content below the header, never behind it. That should solve this problem as I see it and the only reason my coder has added so much padding is because of this issue. I hope that you have understood the problem now and I thought that the support members I talked to before had understood this already. But as my coder confirmed to me again, this issue hasn’t been fixed. So please let me know what we can do about this.

If you were saying that the padding could somehow cause this behavior then we could look into that. But it sounded like you just misunderstood what the problem was, so please clarify if that was the case.

Cheers,
Andreas

#22

Hey Andreas,

We’re sorry for the confusion. To iterate, you have updated to the latest version and removed the custom JS code which is correct.

Regretfully though, the issue persists in the latest version so the bugfix in our changelog is incorrect. I should have tested before recommending. We’re very sorry about this.

Please revert to the stable version for now.

Thanks.

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