Javascript function is not loaded with onload, but it is with onclick

In the page I'm developing I have this code that starts the menu of the site

<section id="yt_menu" class="block" style="visibility:hidden">

I'm using visibility: hidden to leave the menu hidden by default, and would like to display it only when the page was loaded, so I changed the body tag to body onload="delayMenu ();" but the function does not execute.

Follow function:

function delayMenu() {
    tempoDelay = setTimeout(showM, 2000); // 2 segundos após a página ser carregada
}
function showM() {
    document.getElementById("yt_menu").style.visibility = "visible";
}

I've also tried using body and leave the function like this:

function delayMenu() {
    tempoDelay = setTimeout(showM, 2000); // 2 segundos após a página ser carregada
}
function showM() {
    document.getElementById("yt_menu").style.visibility = "visible";
}
window.onload = delayMenu;

But it also did not work. Has anyone ever experienced this? Would you know what the problem might be?

The site is running in Joomla, and the first example works on a "clean" page, it just does not make a difference when I apply it on the site ... the Google Chrome console does not show any errors.