GHL Menu Sticky Scrolling Menu (watch the video in Notes.txt)

1-Notes.txt

Source: https://www.facebook.com/groups/gohighlevel/posts/2356583604801161/

Here is the code that enables a sticky menu that eases in and out upon scroll. Just copy/paste in your Website > Settings Head and Body tracking code fields, then follow my quick video here to set your sticky menu up in HighLevel:

https://www.loom.com/share/fd0d5c87f377401d8e589c5d6a4107ce?sid=7745df88-84b4-4aef-9b05-ee86947b73e5

If you need any help, shoot me an email: [email protected].

T-WORX, Inc.
Tracy Wittenkeller
HighLevel Agency #684

2-ghl-header-sticky-menu-header.js

<script
  src="https://code.jquery.com/jquery-3.6.3.min.js"
  integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU="
  crossorigin="anonymous"
></script>

<style>
.header-scroll {
    background-color: rgba(27, 38, 87, .98) !important;
}
.sticky-section {
    transition: all 0.3s ease-in-out;
}
</style>

3-ghl-body-sticky-menu.js

<script>
// Source: https://gist.github.com/cliffordp/3c19a47a873f4c2ce6c0e95fa2079162
$(function ($) {
    $(window).scroll( () => {
        let headerScroll = $(window).scrollTop();
        if (headerScroll >= 1) {
            $('.sticky-section').addClass('header-scroll');
        } else {
            $('.sticky-section').removeClass('header-scroll');
        }
    });

});
</script>