Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
Recently when scrolled to the top of our homepage the hero slider os cropping to a square and our menu header background disappears. But once you start scrolling down the issue resolves. Any ideas? Nothing I’ve tried so far has helped.
Here is the website I’m referencing in my post.
https://globalwaterstewardship.org/
Hi Morgan
Thanks for posting.
Full width stretched uses JavaScript to break out of any theme’s container. It’s possible we’re looking at a plugin conflict. Please, try the steps outlined below to see if a working baseline can be found with only Vantage and SiteOrigin plugins activated. You can also try testing in that state without your Custom CSS in place.
This sounds like it could be a plugin conflict issue. Can you try disabling all non-SiteOrigin plugins and see if this fixes the issue? You’ll need to clear all your caches after disabling your plugins.
If it does fix the issue, then try re-enabling your plugins one by one until the issue comes back. This procedure will help diagnose which plugin is causing the issue.
Once we know that, we’ll be able to look at what might be causing the conflict and either solve the problem or help you find an alternative plugin.
If you aren’t using a SiteOrigin theme, then you can also try temporarily switching to one of the default WordPress themes to see if the issue is theme related.
Hi Andrew,
Thank you! I was able to determine the ‘Insert Headers and Footers’ plug-in was the issue. There is a string of coded inserted into the Header that was placed prior to us coming in to assist with driving donations for them. I’ll paste the code below and if you can see where the error may be occurring I’d appreciate any assistance we can get.
var isHome = false;
function setHeaderPosition() {
var nav = jQuery(‘.main-navigation’);
var header = jQuery(‘#masthead’);
var main = jQuery(‘#main’);
var height = nav.height();
header.css({ ‘min-height’: height });
header.css({ ‘height’: height });
main.css({ ‘margin-top’: -height });
}
jQuery(document).ready(function () {
isHome = jQuery(‘body’).hasClass(‘home’);
if(isHome){
jQuery(‘.main-navigation’).css({ ‘border-bottom’: ‘0px’ });
jQuery(‘.main-navigation’).css({ ‘background-color’: ‘#1a273b00’ });
setHeaderPosition();
}
});
jQuery(window).on(‘resize’, function () {
if(isHome){
setHeaderPosition();
}
});
//header animation
jQuery(window).on(‘scroll’, function () {
if(isHome){
var range = jQuery(window).height() * .30;
var scrollTop = jQuery(this).scrollTop();
var calc = 1 – ((range – scrollTop) / range);
if (calc > ‘1’) {
calc = 1;
} else if (calc < '0') {
calc = 0;
}
var alpha = Math.round(calc * 255).toString(16);
if (alpha.length == 1) {
alpha = '0' + alpha;
}
var color = '#1a273b' + alpha;
var border = '#f3a819' + alpha;
jQuery('.main-navigation').css({ 'background-color': color });
if (calc == 0) {
jQuery('.main-navigation').css({ 'border-bottom': '0px' });
} else {
jQuery('.main-navigation').css({ 'border-bottom': '4px solid' + border });
}
}
});
Hi Morgan, I’m really glad to hear you’re making progress. I wish we could assist further. We’re a small operation with limited resources. Our free support scope is limited to basic usage and troubleshooting. This is something we could investigate a little within our premium support scope where have a bit more to work with the way of resources. Codeable.io is a great resource if you’d ever like to hire a WP developer.