Hoverintent fails to hide div on hover

I hover on top of the div with the id="navbar" and it just won't seem to do anything.

i have added this to my head

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

code:

ShowNavbar = function(){
  // show
}
HideNavbar = function(){
    // hide
}

var config = {    
  sensitivity: 1, // number = sensitivity threshold (must be 1 or higher)    
  interval: 200, // number = milliseconds for onMouseOver polling interval    
  over: ShowNavbar(), // function = onMouseOver callback (REQUIRED)    
  timeout: 1500, // number = milliseconds delay before onMouseOut    
  out: HideNavbar() // function = onMouseOut callback (REQUIRED)
 };
$("html #navbar").hoverIntent( config );

my old code that worked

var timeout
const doc = document;
const navbar = doc.getElementById("navbar");
navbar.onmouseover = function(){
  navbar.style.top = '0';
  window.clearTimeout(timeout);
  timeout = setTimeout(function() {
    HideNavbar()
  }, 1500);
};

Im not familiar with hoverIntent, so this is a general observation.

For over and out you are not passing a reference to a function, but rather the result of the functions as you are calling the function in your object

Try this instead.

var config = {    
  sensitivity: 1, // number = sensitivity threshold (must be 1 or higher)    
  interval: 200, // number = milliseconds for onMouseOver polling interval    
  over: ShowNavbar, // function = onMouseOver callback (REQUIRED)    
  timeout: 1500, // number = milliseconds delay before onMouseOut    
  out: HideNavbar // function = onMouseOut callback (REQUIRED)
 };