How do I make my navbar items vertical while letting the logo and icon stay on top

It’s my first time doing some responsive design and I use this as an excercise. But after trying this for several hours I’m desperate now. So I have a simple Navbar with a logo at the left corner, four nav-items in the middle and three buttons at the right.

When the viewport is reaching a width of 912px, I hide the nav-items in the middle. Now only the Logo at the left stays and the three buttons at the right are replaced with a burger menu icon.

When I click on the hamburger menu icon, the nav-items should appear and stack vertically below the logo and menu icon. But they are just appearing somewhere between the the logo and the menu. At this point I’m too unexperienced to resolve the issue. So I’m kindly asking for help.

Link to JSFiddle: https://jsfiddle.net/0nrc1wq4/1/

<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
          rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="navbar.css" />
    </head>

<body>
    <header>
        <nav>
            <img src="../images/logo-small.svg" alt="Logo" id="icon-logo" class="corner-item-left" />
            <ul>
                <li class="nav-item"><a class="nav-link" href="#Willkommen">Willkommen</a></li>
                <li class="nav-item"><a class="nav-link" href="#Wohnen">Wohnen</a></li>
                <li class="nav-item"><a class="nav-link" href="#Kleinwalsertal">Kleinwalsertal</a></li>
                <li class="nav-item"><a class="nav-link" href="#Kontakt">Kontakt</a></li>
            </ul>
            <ul>
                <li class="icon-item"><button class="icon-button" id="icon-phone"><img src="../images/icon-phone.svg" alt="Telefon"/></button></li>
                <li class="icon-item"><button class="icon-button" id="icon-contact"><img src="../images/icon-contact.svg" alt="Kontakt"/></button></li>
                <li class="icon-item"><button class="icon-button corner-item-right" id="icon-booking"><img src="../images/icon-booking.svg" alt="Buchen"/></button></li>
            </ul>
            <button class="burger-menu-button" id="burger-menu">☰</button>
        </nav>
    </header>

    <script>
        const burgerMenu = document.getElementById("burger-menu");
        const logo = document.getElementById("icon-logo");
        const navUl = document.querySelector("nav ul");

        function toggleMenu() {
            toggleLogo();
            toggleBurgerMenuIcon();
            toggleNavVisibility();
        }

        function toggleLogo() {
                if (logo.src.includes("logo-small.svg")) {
                    logo.src = "../images/logo-filled.svg";
                } else {
                    logo.src = "../images/logo-small.svg";
                }
        }

        function toggleBurgerMenuIcon() {
            if (burgerMenu.innerHTML === "☰") {
                burgerMenu.innerHTML = "✖";
            } else {
                burgerMenu.innerHTML = "☰";
            }
        }

        function toggleNavVisibility() {
            navUl.classList.toggle("nav-visible");
        }

        burgerMenu.addEventListener("click", toggleMenu);
    </script>
</body>

HTML & JS:

Thank you in advance!

You need to sign in to view this answers

Related Post