The sticky header isn't sticking and the parallax isn't parallaxing

[ethosdesign]

I’ve tested for plugin conflicts, removed any and all css, and the two features are till not working they way they should be. Any thoughts?

[ruenel]

Hello Ken,

Thanks for writing in! Could you please confirm that you have updated to the latest versions?
Our latest versions are:

• Pro theme 4.2.3 or
• X theme 8.2.3
• Cornerstone 5.2.3
• WordPress 5.7
• PHP 7.4

This latest release contains fixes for several issues so be sure to check out the changelog:

• https://theme.co/docs/changelog/pro-4 or
• https://theme.co/docs/changelog/x-8
• https://theme.co/docs/changelog/cornerstone-5

After doing the updates, always remember to clear all caches (if you are using WP Rocket, WP SuperCache or W3 Total Cache) when updating so that the code from the latest release is always in use. This will help you to avoid any potential errors.

It could also be caused by a plugin conflict, amongst other things. Please check out this troubleshooting article here and follow the instructions for the following sections (where appropriate):

Testing for Plugin Conflict
Theme Update
Child Theme
CSS/JS Customization
Increasing PHP Memory Limit
Disabling Cache
Disabling CDN

If nothing is helping, provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
- Confirmation that we can access and make changes to your site
​
To know how to create a secure note, please check this out: How The Forum Works

Please let us know how it goes.

[ethosdesign]

Everything is up to date, I tested for plugin conflicts, and I tried removing all of the custom CSS, nothing seemed to work.

[ruenel]

Hello Ken,

There is a JS error on the site which is causing the issue. I have logged in and inspected your site. In Pro > Theme Options > JS, you have inserted a CSS code that is wrong.

Please remove the CSS code:

.appt_head {
  font-size: 1.5em;
  font-weight: 400;
  background-color: rgb(99,198,193);
  box-shadow: 0em 0.15em 0.65em 0em rgb(0 0 0 / 25%);
  color: #fff;
  padding: 16px 25px 15px 25px 
}

a.appt_head:hover {
  background-color: rgb(249,113,103);
  color: #fff;
}

.appt_nav {
  font-size: 1.2em;
  font-weight: 400;
  line-height: 1.2;
  background-color: rgb(99,198,193);
  box-shadow: 0em 0.15em 0.65em 0em rgb(0 0 0 / 25%);
  color: #fff;
  padding: 9px 20px 9px 20px 
}

a.appt_nav:hover {
  background-color: rgb(249,113,103);
  color: #fff;
}

.sch_appt {
  font-size: 1.1em;
  font-weight: 400;
  background-color: rgb(99,198,193);
  box-shadow: 0em 0.15em 0.65em 0em rgb(0 0 0 / 25%);
  color: #fff;
  padding: 16px 25px 15px 25px 
}

a.sch_appt:hover {
  background-color: rgb(249,113,103);
  color: #fff;
}

You should be adding it in the Pro > Theme Options > CSS instead. And also, please remove the same in your custom header > JS section.

Kindly let us know how it goes.

[ethosdesign]

Ok so we removed the code as instructed, and the issue is resolved on every page except for the homepage. Any other thoughts?

[ruenel]

Hey Kimberly.

This could be some caching issue. Since you are hosted in SiteGround, could you please disable the Supercacher in your hosting panel? The SuperCacher is developed by SiteGround exclusively for their customers. It increases the number of hits a site can handle and boosts the website loading speed. The SuperCacher includes 4 different caching options for maximum optimization of your websites. You can access the tool by clicking on the SuperCacher icon in your cPanel.

For more information about this, please check it out here: https://www.siteground.com/tutorials/supercacher/supercacher_intro.htm

Kindly let us know how it goes.