Issue
- The bar covers the website sticky header no matter if the bar is sticky or not.
Notes
- The non sticky option of the app does NOT work for this solution. It has to be sticky.
- This solution works with Retina 4.0.
Solution - 3 steps
Step 1: Select the placeholder option
- Select the last option under the "position" setting in the bar configuration in the App
- Check the “Pin the Bar” option
- Scrolling to the very end, and click the "Save" button to save the change

Step 2: Add Part I
- Go to Admin > Online Store > Themes.
- Click the "Actions" button on the right-hand side, and select "Edit code".
- Find theme.liquid from the left-hand side file list and open it
- Find <div id="content_wrapper
- Add following codes after it and save the changes.
<div id="qab_placeholder"></div>

Step 3: Add Part II
- Find app.js.liquid from the left-hand side file list and open it
- Add following codes at the very end of the file and save the changes.
$(document).ready(function() {
var qab_adjusted = false;
$( "#qab_placeholder" ).on( "qab_fully_loaded", function(event, p1) {
if ((p1=='inserted' || p1=='inserted_sticky') && !qab_adjusted ){
qab_adjusted = true;
var qab_height = $("#qab_background").outerHeight();
var menu_top = parseInt($("#header").css("top"));
var menu_top_2 = parseInt($(".header").css("top"));
$( "#header" ).css("top", qab_height + menu_top + "px");
$("<div />", {html: '<style>' + '#qab_background{top:0;}#qab_placeholder{padding-bottom:0!important;}.header{top:' + qab_height +'px}@media only screen and (max-width: 767px){.header{top:0;}}' + '</style>'}).appendTo("body")
}
$("#qab_close").on( "click", function(){
$( "#header" ).css("top", menu_top + "px");
$( ".header" ).css("top", "0px");
});
$(".icon-cart").on( "click", function(){
var top = $(document).scrollTop();
$("<div />", {html: '<style>' + '.mm-opening #qab_background{top:' + top + 'px;}' + '</style>'}).appendTo("body")
});
$(".add_to_cart").on( "click", function(){
var top = $(document).scrollTop();
$("<div />", {html: '<style>' + '.mm-opening #qab_background{top:' + top + 'px;}' + '</style>'}).appendTo("body")
});
});
$("#qab_placeholder").on("qab_fully_unloaded", function(event, p1) {
$( "#header" ).css("top", menu_top + "px");
$( ".header" ).css("top", "0px");
});
});

Comments
0 comments
Article is closed for comments.