I want a navbar to disappear wright after the website has loaded

window.onload = function(){
        setTimeout(function (){
            document.getElementById("navbar").style.top = "-500px";
        },2000);
    }``

The rest of the content on my website (Cards generated with Bootstrap) disappears. They are not just not visible, it is just the nav, an image and the footer left without any empty space in between, so it totally removes them, as if they weren´t in the code.

When removing the brackets after "function" the content appears, but pushing up the navbar doesn´t work anymore.

Using display:none doesn´t change the issue. Neither does hiding it and changing the pointer

CodePudding user response：

How about instead of changing the navbars position, which will shift everything else with it, you just hide it and disable pointer events as such:

window.onload = function(){
    setTimeout(function (){
        document.getElementById("navbar").style.opacity = 0
        document.getElementById("navbar").style.pointerEvents = "none";
    },2000);
}

The navbar will still be there so no positioning of other elements on the page will be affected, but it will be invisible and if they try to click on the former navbar, nothing will work.

You could also use display: none;, but that would shift the position of everything else on the page.

CodePudding user response：

Use display: none; instead

window.onload = function(){
    setTimeout(function (){
    document.getElementById("navbar").style.display = "none";
  },2000);
}

CodePudding user response：

Solution to the problem was removing the

window.onload = function(){

}

around the Timeout and adding a different condition