CSS导航栏汉堡菜单logo与社交图标上下定位问题求助

修改方案 #

你只需要按照以下3步调整代码即可实现期望效果，不会影响汉堡菜单触发前的桌面端样式：

第一步：调整HTML结构

将mainMenu内的三个导航链接用统一容器包裹，保证布局逻辑清晰：

<ul class="mainMenu">
    <!-- Center-aligned links -->
    <div class="nav-center">
        <div class="navLogo"><a href="index.html"><img src="src/assets/TWINLOGO.png" style="width: 100px;height: 100px;"></a></div>
    </div>
    <!-- 新增导航链接专属容器 -->
    <div class="nav-links">
        <li><a href="contact.html" class="leftLinks">Contact</a></li>
        <li><a href="about.html" class="leftLinks">About</a></li>
        <li><a href="https://twins-merch-5.creator-spring.com/" target="_blank" class="leftLinks">Store</a></li>
    </div>
    <div class="closeMenu"><i class="fa fa-times"></i></div>
    <!-- Right-aligned links -->
    <div class="nav-right">
        <span class="icons">
            <a href="https://www.youtube.com/c/TwinPlayz_YT/?sub_confirmation=1" target="_blank"><i class="fab fa-youtube"></i></a>
            <a href="https://www.instagram.com/yt.twinplayz" target="_blank"><i class="fab fa-instagram"></i></a>
            <a href="https://twitter.com/TwinPlayz_YT" target="_blank"><i class="fab fa-twitter"></i></a>
            <a href="https://github.com/ConstantineLinardakis" target="_blank"><i class="fab fa-github"></i></a>
        </span>
    </div>
</ul>

第二步：添加全局CSS（不在媒体查询范围内）

默认隐藏移动端汉堡菜单内才需要显示的logo和社交图标，避免破坏桌面端原有样式：

/* 桌面端隐藏移动端菜单专属元素 */
nav .mainMenu .nav-center,
nav .mainMenu .nav-right,
nav .mainMenu .nav-links {
    display: none;
}

第三步：修改805px断点内的媒体查询CSS

调整汉堡菜单的布局逻辑，实现logo在上、导航在中、社交图标在下的排列：

@media(max-width: 805px){
    /* 原有代码保持不变，新增以下样式 */
    /* 显示移动端专属元素 */
    nav .mainMenu .nav-center,
    nav .mainMenu .nav-right,
    nav .mainMenu .nav-links {
        display: block;
    }
    /* 导航链接垂直排列、居中对齐 */
    nav .mainMenu .nav-links {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }
    /* 调整原有mainMenu的布局规则 */
    nav .mainMenu {
        /* 保留原有属性，将justify-content修改为space-between，添加上下内边距 */
        justify-content: space-between;
        padding: 3rem 0;
        box-sizing: border-box;
    }
}

JS代码无需修改，原有逻辑可以正常运行。

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