How to fix header and bar overlap

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

Since there is a countless number of themes, and each of them being built differently; unfortunately, it’s very difficult to come up with a solution for all themes. However, in this article we’ll be guiding you through implementing a workaround that should, in most cases, solve this issue.

This workaround should work if the problem exists on either mobile or desktop or on both. It consists of placing a small piece of code into your theme. This piece of code would only push your website header down to the correct position, so both your website header and your bar will be shown 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 the 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