我已经在html中创建了导航，我想使之适应性：当宽度小于764px时，请删除此<nav>并添加图标按钮，这会在下拉菜单中打开我的导航列模式。 我使用flexbox，并希望使用清晰的JS。

第二个问题是我的下拉菜单在打开时不占用空间，我应该使用position: ;之类的东西吗？

HTML：

<header>
    <nav class="header__nav">
        <div class="container">
            <div class="navbar--wrapper">
                <div class="openButton" id="openButton">Open the menu!</div>
                <ul class="navbar" id="navbar">
                    <li class="nav__link"><a href="#">element7</a></li>
                    <li class="nav__link"><a href="#">element2</a></li>
                    <li class="nav__link"><a href="#">element3</a></li>
                    <li class="nav__link"><a href="#">element4</a></li>
                    <li class="nav__link"><a href="#">element5</a></li>
                    <li class="nav__link"><a href="#">element6</a></li>
                    <li class="nav__link"><a href="#">element7</a></li>
                </ul>
            </div>
        </div>
    </nav>
</header>
<script src="scripts/menu.js"></script>

CSS：

*,*:before,*:after {
    box-sizing: border-box;
    font-family: "Open Sans",sans-serif;
}

body {
    margin: 0;
}

.container {
    width: 1200px;
    margin: 0 auto;
    height: inherit;
}

h1 {
    font-size: 20px;
    font-weight: normal;
}

ul {
    margin: 0;
    padding: 0;
}

li {
    list-style-type: none;
}

a {
    text-decoration: none;
}

/* HEADER ============ */

nav.header__nav {
    height: 70px;
    background-color: #1156ed;
}

.contact-number {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
}

.contact__row {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.contact-text {
    font-weight: 600;
    font-size: 18px;
    margin-left: 5px;
}

.navbar--wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.openButton {
    display: none;
    cursor: pointer;
}

@media (max-width: 764px) {
    .openButton {
        display: flex;
    }
    ul.navbar {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
    }
    ul.navbar:active {
        display: flex;
        flex-direction: column;
    }
    ul.navbar>li {
        display: flex;
    }
}

ul.navbar {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

li.nav__link {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

li.nav__link:hover {
    background-color: #0f3ea3;
    transition: 1s ease-out;
}

li.nav__link > a {
    color: #ffffff;
    text-transform: uppercase;
    font-size: 15px;
}

JS：

window.onload function() {
    var navbarStyle = getcomputedStyle(navbar);

    openButton.onclick function() {
        if (navbarStyle.display == "none") {
            navbar.classList.add("active");
            this.innerHTML = "Close";
        } else {
            navbar.classList.remove("active");
            this.innerHTML = "Open";
        }
    }
}