Issue
- When selecting any sticky position option, the bar covers the website sticky header on mobile.
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 header.liquid from the left-hand side file list and open it.
- At top, add the following code and save the changes.
<div id="ctb_placeholder"></div>

Step 3: Add Part II
- Find theme.liquid from the left-hand side file list and open it.
- Find </body>.
- Before it, adding the following code and save the changes.
<script>
var ctb_adjusted = false;
$( "#ctb_placeholder" ).on( "ctb_fully_loaded", function(event, p1) {
if ((p1=='inserted' || p1=='inserted_sticky') && !ctb_adjusted ){
ctb_adjusted = true;
var ctb_height = $("#epb_background").height();
$("<div />", {html: '<style>' + '.header__mobile-nav{top:' + ctb_height + 'px!important;}' + '</style>'}).appendTo("body");
}
$("#ctb_close").on( "click", function(){
$("<div />", {html: '<style>' + '.header__mobile-nav{top:0!important;}' + '</style>'}).appendTo("body");
});
});
$("#ctb_placeholder").on("ctb_fully_unloaded", function(event, p1) {
$("<div />", {html: '<style>' + '.header__mobile-nav{top:0!important;}' + '</style>'}).appendTo("body");
});
</script>

Comments
0 comments
Article is closed for comments.