如何修复响应式Navbar移动端菜单布局及高亮按钮显示问题？

问题说明 #

• 点击移动端菜单后，链接呈横向排列，需改为纵向列布局
• 高亮按钮（Login/Contato）未被纳入移动端菜单容器内

修改后的完整代码 #

HTML

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/main/style.css">
    <link rel="stylesheet" href="/main/main.css">
    <!-- 字体引入 -->
    <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=Manrope:wght@200..800&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/de42dd2adf.js" crossorigin="anonymous"></script>
    <title>Bryant Ecom</title>
</head>
<body>
    <!-- 导航栏 -->
    <header>
        <nav id="navbar">
            <img src="/images/logo.png" alt="Bryant Ecom" id="logo">
                
            <div class="nav-links" id="navLinks">
                <a href="index.html" class="active">Início</a>
                <a href="link2.html">Link 2</a>
                <a href="link3.html">Link 3</a>
                <a href="link4.html">Link 4</a>
                <a href="link5.html">Link 5</a>
                <a href="link6.html">Link 6</a>
                
                <!-- 将高亮按钮容器移入导航链接容器内 -->
                <div class="highlight-links">
                    <a href="#" class="nav-btn">Login</a>
                    <a href="#" class="nav-btn">Contato</a>
                </div>
            </div>

            <a href="javascript:void(0)" class="btn" onclick="myFunction()">
                <i class="fa-solid fa-bars"></i>
            </a>
        </nav>
    </header>
    <script src="/main/script.js"></script>
</body>
</html>

CSS

:root{
    /* 颜色变量 */
    --cor-principal: #186fdb;
    --cor-secundaria: #000000;
    --cor-adicional: #ffffff;
    /* 字体变量 */
    --ff:"Manrope", sans-serif;
    --h1: bold 4rem/1em var(--ff);
    --h2: bold 3rem/1.2em var(--ff);
    --h3: bold 2.25rem/1.2em var(--ff);
    --h4: bold 1.5rem/1.6em var(--ff);
    --p: 1rem/1.6em var(--ff); 
    --fw: 600;
    --logo: 150px;
}

body {
    font-family: var(--ff);
    margin: 0;
    padding: 28px 8%;
    box-sizing: border-box;
}

header {
    width: 100%;
}

#logo {
    height: var(--logo);
    cursor: pointer;
}

/* 导航栏基础样式 */
#navbar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative; /* 为移动端菜单绝对定位提供参考 */
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 80px;
}

.nav-links a {
    text-decoration: none;
    color: var(--cor-secundaria);
    font: var(--p);
    font-weight: var(--fw);
    position: relative;
}

.nav-links a::after{
    content: '';
    position: absolute;
    width: 0;
    height: 3px;
    background-color: var(--cor-principal);
    left: 0;
    bottom: 0;
    transition: width 0.3s ease;
}

.nav-links a:hover::after {
    width: 100%;
}

.nav-links a.active::after {
    width: 100%;
}

.nav-links.active a {
    color: var(--cor-principal);
    border-bottom: 3px solid var(--cor-principal);
}

/* 高亮按钮样式 */
.highlight-links {
    display: flex;
    gap: 10px;
    list-style: none;
    margin-left: 40px; /* 和普通链接拉开距离 */
}

.nav-btn {
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    padding: 10px 15px;
    font-weight: var(--fw);
    color: var(--cor-adicional);
    background-color: var(--cor-principal);
    transition: background-color .3s ease;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
} 

.nav-btn:hover {
    background-color: #468ce2;
}

/* 移动端菜单按钮 */
.btn {
    display: none;
    color: var(--cor-secundaria);
    background: transparent;
    border: none;
}

/* 移动端响应式样式 */
@media screen and (max-width: 1170px) {
    .nav-links {
        display: none;
    }

    .btn {
        display: block;
        font-size: 1.5rem;
        cursor: pointer;
    }
    
    /* 激活后的移动端菜单 */
    .nav-links.responsive {
        display: flex;
        flex-direction: column; /* 设置纵向布局 */
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: white;
        padding: 20px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        gap: 15px; /* 链接之间的纵向间距 */
        box-sizing: border-box;
    }

    .nav-links.responsive .highlight-links {
        flex-direction: column; /* 按钮纵向排列，如需横向可改为row */
        margin-left: 0;
        gap: 10px;
        width: 100%;
    }

    .nav-links.responsive .nav-btn {
        width: 100%; /* 按钮宽度铺满容器 */
    }
}

JavaScript

function myFunction() {
    var x = document.getElementById("navLinks");
    x.classList.toggle("responsive"); // 用toggle简化类切换逻辑，避免重复添加类名
}

// 点击链接时激活当前项并关闭菜单
const navLinks = document.querySelectorAll('.nav-links a');
navLinks.forEach(link => {
  link.addEventListener('click', function () {
    navLinks.forEach(link => link.classList.remove('active'));
    this.classList.add('active');
    // 点击链接后自动关闭移动端菜单
    document.getElementById("navLinks").classList.remove("responsive");
  });
});

修改关键点说明 #

1. HTML结构调整：将.highlight-links移入.nav-links内部，确保移动端菜单能包含高亮按钮。
2. CSS响应式优化：
   • 给#navbar添加position: relative，作为移动端菜单绝对定位的参考容器。
   • 设置.nav-links.responsive为flex-direction: column，实现纵向布局，同时添加背景、阴影提升视觉层级。
   • 调整移动端下高亮按钮的布局，让按钮适配纵向排列（如需横向可修改flex-direction: row）。
3. JS逻辑简化：用classList.toggle替代手动拼接类名，避免重复添加类的问题；新增点击链接后关闭菜单的逻辑，优化移动端交互体验。

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