How to make header sticky or fixed at top

Follow these steps to fix the header at the top:

1. Go to design theme in StoreHippo Admin Panel.
2. Go to the HTML section in the sidebar.
3. Select header widget.
4. Add the script at the end of the widget code.

<script type="text/javascript">
    window.onscroll = scroll1;
    window.addEventListener("scroll", scroll1);

    function scroll1() {
        var scroll = window.pageYOffset;// to get the scroll amount of page
        if (scroll > 27) {
            document.getElementById("main-header").style.position = "fixed";
            document.getElementById("main-header").style.top = "0px";
            document.getElementById("main-header").style.right = "0px";
            document.getElementById("main-header").style.left = "0px";
            document.getElementById("main-header").style.zIndex = "25";
            document.getElementById("nav-header").style.position = "fixed";
            document.getElementById("nav-header").style.width = "100%";
            document.getElementById("nav-header").style.top = "57px";
            document.getElementById("nav-header").style.zIndex = "99";
        }
        else {
            document.getElementById("main-header").style.position = "initial";
            document.getElementById("nav-header").style.position = "initial";
            document.getElementById("main-header").style.position = "static";
            document.getElementById("nav-header").style.position = "static";
            document.getElementById("main-header").style.top = "0px";
            document.getElementById("main-header").style.right = "0px";
            document.getElementById("main-header").style.left = "0px";
            document.getElementById("nav-header").style.display = "block";
        }
    }
</script>

   6. Save the changes and review the changes.