Content being hidden behind header

Support
#1

Hi,

I’ve got another request from my coder and it concerns the header and the content being hidden behind it. We’d like to change that because it causes nothing but problems and serves no purpose whatsoever. Specifically part of the page is being hidden behind the header at all times, so part of the front image is hidden as well when first entering the site. And every time you click on a link that makes the page scroll down to a section part of that section is also being hidden behind the header. According to my coder that’s not something that can be easily fixed to work on all resolutions, so the best solution seems to be to have the page’s content only be displayed below the header. Can you provide any guidance on how best to do this? My coder said that she’d have to modify the theme’s js file to make that change, but since we’ve already lost tons of time due to different issues related to this theme and custom code we would like to avoid more of that.

This problem exists on desktops and mobiles, although on mobile devices the content seems to not be initially hidden behind the header, but when you start scrolling down the site jumps as suddenly it does start hiding part of the page behind it. Which only makes it worse. A solution that won’t create any new problems would be appreciated.

Cheers,
Andreas

edit: And as I’ve had my coder clarify for me, the content apparently isn’t hidden on desktops until you start scrolling down. So the issue mainly seems to lie in how the site scrolls down too far when clicking on a link because part of the site is covered by the header.

#2

Howdy @spektukal, thanks for writing in!

Could you please share a link to your live website for us? Unfortunately, there’s not much we can do to assist with matters like this unless we’re looking at the actual page where the problem is happening to help diagnose the problem. Once we have that link from you we’ll be happy to take a look and see how we can help.

Cheers!

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