How to fix header and bar overlap

On some Shopify themes, especially themes with a fixed header, the bar and the theme's header can overlap, causing one of them to cover the other.

Since there are countless themes, each built differently, it's unfortunately very difficult to devise a solution for all. However, in this article, we'll guide you through implementing a workaround that should solve this issue in most cases.

This workaround should work if the problem exists on either mobile or desktop, or both. It involves placing a small piece of code into your theme. This piece of code will only push your website header down to the correct position, ensuring both your website header and your bar are displayed correctly without overlapping.

Please note that this piece of code is only activated if you have an active bar on your website. So, even if you left it in your theme while not using Attrac, it won't be active and therefore, won't affect your website in any way.

First, we need to place a small piece of code inside the theme, so let’s go ahead and open up Shopify’s theme code editor.
Open the “Snippets” folder in the file navigator to the left, then click “Add a new snippet”
Give your snippet a name, then click “Create snippet”
Copy and paste the following code inside your newly created file:

<script async type="text/javascript">
var retry = 120;
var waitForBar = function (callback) {
    if (retry > 0) {
        if (typeof $ != "undefined") {
            if ($(".aph_bar_bar").length > 0 && $(".aph_bar_bar").height() > 0) {
                callback();
            }
            else {
                retry = retry - 1;
                setTimeout(function () {
                    waitForBar(callback);
                }, 100);
            }
        }
        else {
            retry = retry - 1;
            setTimeout(function () {
                waitForBar(callback);
            }, 100);
        }
    }
};

waitForBar(function () {
    var top = 0;
    var isFixed = false;
    $(".aph_bar_bar").each(function (i) {
        if ($(".aph_bar_bar").eq(i).offset().top < $(window).height() / 2) {
            top = top + $(".aph_bar_bar").eq(i).innerHeight();
            if ($(".aph_bar_bar").eq(i).css("position") == "fixed") {
                isFixed = true;
            }
        }
    });

    $("header").css("top", top);
    if (!isFixed) {
        $(window).scroll(function () {
            if ($(window).scrollTop() > top) {
                $("header").css("top", 0);
            }
            else {
                $("header").css("top", top);
            }
        });
    }
});
</script>

5. Click "Save" to save the changes to your file.

6. Now we only need to include our new file into the “theme.liquid” file, so the theme can load it.

7. Open your “theme.liquid” file using the file navigator.

8. Search for “</body>” tag (without quotes), then paste the following code directly above it:

	{% include 'your_file_name' %}

Make sure to replace ‘your_file_name’ with the name of the file you created earlier (keeping the single quotes)

9. Click "Save" to save the changes to your “theme.liquid” file.

10. Close the editor, and visit your website using a private browser window to check if the workaround worked.

If the issue persists even after following these steps, please contact our support team to help you fix it.

How to fix header and bar overlap

Related Articles