Solved

sticky header and mega menu hiding behind elements

jayb1986
Visitor
2 0 1

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 

Accepted Solution (1)

Stixen
Shopify Partner
6 1 2

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





View solution in original post

Replies 2 (2)

Stixen
Shopify Partner
6 1 2

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





jayb1986
Visitor
2 0 1

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