Helpcenter +918010117117 https://cdn1.storehippo.com/s/573db3149f0d58741f0cc63b/ms.settings/5256837ccc4abf1d39000001/57614ef64256dc6851749879-480x480.png" support@storehippo.com https://www.facebook.com/StoreHippohttps://twitter.com/StoreHippohttps://www.linkedin.com/company/hippoinnovations/https://plus.google.com/+Storehippo/posts
B4,309-10 Spaze iTech Park, Sector 49, Sohna Road, 122001 Gurgaon India
call to replace anchor tags contains '/admin' in href

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.

Share:

2019-03-05T11:11:16.775Z