响应式Navbar问题：如何让导航项垂直排列在Logo与汉堡图标下方？

问题解决思路与代码修改 #

核心问题在于移动端布局时，导航菜单展开后仍处于原flex布局的中间位置，通过调整HTML结构和CSS布局逻辑，让展开的导航项垂直排列在顶部栏下方：

1. 重构HTML结构

将Logo和汉堡按钮放入统一容器，方便移动端顶部栏布局：

<header>
    <nav>
        <div class="nav-header">
            <img src="../images/logo-small.svg" alt="Logo" id="icon-logo" class="corner-item-left" />
            <button class="burger-menu-button" id="burger-menu">☰</button>
        </div>
        <ul class="nav-links">
            <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 class="icon-buttons">
            <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>
    </nav>
</header>

2. 调整CSS布局逻辑

通过媒体查询控制移动端和桌面端的布局差异：

/* 基础样式 */
nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    background: #fff;
}

.nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.burger-menu-button {
    display: none;
    font-size: 1.5rem;
    border: none;
    background: transparent;
    cursor: pointer;
}

.nav-links {
    display: flex;
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.icon-buttons {
    display: flex;
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.icon-button {
    border: none;
    background: transparent;
    cursor: pointer;
}

/* 移动端适配（<=912px） */
@media (max-width: 912px) {
    .burger-menu-button {
        display: block;
    }

    .icon-buttons {
        display: none;
    }

    nav {
        flex-direction: column;
        align-items: flex-start;
    }

    .nav-header {
        width: 100%;
    }

    .nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
        gap: 1rem;
        padding: 1rem 0;
        border-top: 1px solid #eee;
    }

    .nav-links.nav-visible {
        display: flex;
    }
}

3. 优化JS选择器

调整导航菜单的选择器，避免误选图标按钮的ul：

const burgerMenu = document.getElementById("burger-menu");
const logo = document.getElementById("icon-logo");
const navUl = document.querySelector(".nav-links");

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() {
    burgerMenu.textContent = burgerMenu.textContent === "☰" ? "✖" : "☰";
}

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

burgerMenu.addEventListener("click", toggleMenu);

修改说明 #

• 移动端将nav设置为垂直flex布局，让导航菜单自然排列在顶部栏下方
• 使用.nav-header容器固定Logo和汉堡按钮的横向布局，保持顶部栏的视觉一致性
• 给导航菜单添加类名.nav-links，确保选择器精准，避免与图标按钮列表混淆

内容的提问来源于stack exchange，提问作者Vischi