Liquid, JavaScript, themes, sales channels
hey guys
As the title suggests, my sticky header and also the mega menu are hiding behind most elements on my website www.ellaywatches.com The mega menu is hidden behind the main banner on my website and the sticky menu follows you as the scroll the page but is being placed behind other sections of my website, whether it be an image, text block or anything else for that matter. This problem has only just started and the only new addition to my website is an app that allows a stick cart button on my product pages.
Any one who can shine some light on this issue will forever hold a special place in my heart
Many thanks guy and stay safe out there
Solved! Go to the solution
This is an accepted solution.
Hi There,
This is a styling issue, whereby the navigation is not set to be the top most layer.
There is an app or a setting somewhere in the theme that has this CSS style applied to the main part of the website:
#main { z-index:99; }
this is basically making the body of the website the top layer. In relation the navigation is set to z-index:4;
so it will always display underneath something with a z-index of 99.
Doing a page source preview, the problem certainly lies within that app stick cart button you mentioned as shown by this piece of code:
<!--sticky add to cart cusstom code-->
<script type="text/javascript">
$( document ).ready(function() {
$('.sticky-custom').removeClass('sticky-show');
setTimeout(function(){
if($('.start-sticky').length){
var obj = $('.start-sticky');
}else{
var obj = $('[data-label="Product"]').first().find('[data-label="(P) Cart Button"]');
}
var top = obj.offset().top - parseFloat(obj.css('marginTop').replace(/auto/, 0));
console.log(top);
$(window).scroll(function (event) {
// what the y position of the scroll is
var y = $(this).scrollTop();
// whether that's below the form
if (y > top && y > 0 ) {
// if so, ad the fixed class
$('.sticky-custom').show().addClass('sticky-show');
$('#shopify-section-footer').css('padding-bottom','45px');
} else {
// otherwise remove it
$('.sticky-custom').hide().removeClass('sticky-show');
$('#shopify-section-footer').css('margin','0px');
}
});
}, 500);
});
</script>
<style type="text/css">
#main{
position:relative;
z-index:99; /** ISSUE HERE*************************************************************************/
}
body:not(.gempage-editing) #main .sticky-custom{
position:relative;
z-index:9999;
display:none;
}
body:not(.gempage-editing) #main .sticky-custom.sticky-show{
position:fixed !important;
bottom:0;
z-index:99;
width:100% !important;
left:0 !important;
margin-left:0 !important;
}
</style>
<!--end sticky add to cart cusstom code-->
Not sure, if you can contact the developer to remedy this bug, or if there is a setting within the app to add your own custom settings, but setting this z-index to 0 or 1 will fix the issue.
Let me know how you go.
Kind Regards
Steve
This is an accepted solution.
Hi There,
This is a styling issue, whereby the navigation is not set to be the top most layer.
There is an app or a setting somewhere in the theme that has this CSS style applied to the main part of the website:
#main { z-index:99; }
this is basically making the body of the website the top layer. In relation the navigation is set to z-index:4;
so it will always display underneath something with a z-index of 99.
Doing a page source preview, the problem certainly lies within that app stick cart button you mentioned as shown by this piece of code:
<!--sticky add to cart cusstom code-->
<script type="text/javascript">
$( document ).ready(function() {
$('.sticky-custom').removeClass('sticky-show');
setTimeout(function(){
if($('.start-sticky').length){
var obj = $('.start-sticky');
}else{
var obj = $('[data-label="Product"]').first().find('[data-label="(P) Cart Button"]');
}
var top = obj.offset().top - parseFloat(obj.css('marginTop').replace(/auto/, 0));
console.log(top);
$(window).scroll(function (event) {
// what the y position of the scroll is
var y = $(this).scrollTop();
// whether that's below the form
if (y > top && y > 0 ) {
// if so, ad the fixed class
$('.sticky-custom').show().addClass('sticky-show');
$('#shopify-section-footer').css('padding-bottom','45px');
} else {
// otherwise remove it
$('.sticky-custom').hide().removeClass('sticky-show');
$('#shopify-section-footer').css('margin','0px');
}
});
}, 500);
});
</script>
<style type="text/css">
#main{
position:relative;
z-index:99; /** ISSUE HERE*************************************************************************/
}
body:not(.gempage-editing) #main .sticky-custom{
position:relative;
z-index:9999;
display:none;
}
body:not(.gempage-editing) #main .sticky-custom.sticky-show{
position:fixed !important;
bottom:0;
z-index:99;
width:100% !important;
left:0 !important;
margin-left:0 !important;
}
</style>
<!--end sticky add to cart cusstom code-->
Not sure, if you can contact the developer to remedy this bug, or if there is a setting within the app to add your own custom settings, but setting this z-index to 0 or 1 will fix the issue.
Let me know how you go.
Kind Regards
Steve
hey Steve
Want to thank you for your response. You were of course completely correct about the issue causing this problem and the app developer has fixed the issue. So everything is working as it should. Appreciate you taking the time to help us out.
Many thanks
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024