In your original code, after clicking the first time to open the nav, the window onclick would then remove the classes added by clicking on the menu button as the event bubbled up. To fix this, add event.stopPropagation() to your menu click handler.

https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation

I also removed the re-bind of the onclick handler, as it was causing the first click to not close the menu properly.

function navBurger(e) {
    console.log('button clicked')
    var element = document.querySelector(".navbar");
    var burger = document.querySelector(".burger-btn");
    element.classList.toggle("extended");
    burger.classList.toggle("open");
    // Prevents the window onclick from firing after this function runs
    // try commenting this out
    e.stopPropagation();
}

window.onclick = function() {
    console.log('onclick triggered');
    var element = document.querySelector(".navbar");
    var burger = document.querySelector(".burger-btn");
    
    if (element.classList.contains("extended")) {
        element.classList.remove("extended");
        burger.classList.remove("open");
    } 
}

document.querySelector(".burger-btn").addEventListener("click", navBurger);

.navbar.extended {
  background: green;
}

.burger-btn.open::after {
  content: "Open";
  display: inline;
}

<nav class="navbar"><button class="burger-btn" type="button">Nav</button></nav>

The cause of the problem is that the global click handler replaces itself with a nested, unconditional function to turn off the burger menu. A second click will open the menu but bubble up to the window handler and turn it off again.

The global handler needs to determine if the click is inside or outside the extended menu before turning it off. Applying the closest method to the click event target can help with this.

window.onload = function() {
    var element = document.querySelector(".navbar");
    var burger = document.querySelector(".burger-btn");
    window.onclick = function(event) {
        if( burger.classList.contains("open") 
          && !event.target.closest(".extended") ) {
            // the click is outside an open extended element
            element.classList.remove("extended");
            burger.classList.remove("open");
        }    
    };
};

The above should close the burger menu if the user clicks outside the element with class "extended". JQuery documentation covers the jQuery closest method and event.target if you wish to write the code in jQuery.

Note setting window.onclick is set in window.onload to avoid confusion, and that using oneventname properties of elements is better replaced by using addEventListener calls in JavaScript.