如何通过CSS将WordPress主题redxunlite水平导航栏转为垂直

我帮你梳理了RedxunLite主题的导航结构，原主题里的.main-menu是桌面端的水平导航，要改成垂直布局，只需要调整几处CSS样式即可，不用改动HTML结构。具体修改方案如下：

步骤1：调整导航容器的整体布局 #

原导航是固定在顶部的全屏容器，我们需要把它改成固定在左侧的垂直侧边栏：

/* 修改导航容器为左侧垂直固定栏 */
.main-navigation {
    width: 250px; /* 可自定义垂直导航的宽度 */
    height: 100vh; /* 占满整个视口高度 */
    top: 0;
    left: 0;
    position: fixed;
    overflow-y: auto; /* 菜单过多时允许滚动 */
}

/* 调整导航内部容器布局，让元素垂直排列 */
.main-navigation .container {
    flex-direction: column;
    display: flex;
    padding: 20px 0;
    height: 100%;
}

步骤2：修改主菜单的垂直排列样式 #

把原来水平排列的.main-menu列表项改成垂直堆叠：

/* 重置主菜单的默认列表样式 */
.main-navigation .main-menu {
    list-style: none;
    padding: 0;
    margin: 20px 0;
    width: 100%;
}

/* 让菜单项垂直排列，铺满导航宽度 */
.main-navigation .main-menu li {
    display: block;
    width: 100%;
    border-bottom: 1px solid #eee; /* 可选：添加分隔线区分菜单项 */
}

/* 优化菜单链接的点击区域和视觉效果 */
.main-navigation .main-menu li a {
    display: block;
    padding: 12px 20px;
    width: 100%;
    text-decoration: none;
    color: #111;
}

/* 鼠标悬停时的样式优化 */
.main-navigation .main-menu li a:hover {
    background-color: #f5f5f5;
}

步骤3：处理移动端菜单和页面内容偏移 #

确保桌面端隐藏移动端菜单，同时给页面主体添加左侧边距避免被导航遮挡：

/* 桌面端隐藏移动端菜单 */
@media (min-width: 768px) {
    .main-navigation .mobile-menu {
        display: none;
    }
    /* 给页面主体添加左侧边距，数值和导航宽度保持一致 */
    body {
        margin-left: 250px;
    }
}

/* 小屏幕下恢复原有顶部导航，保持移动端体验不变 */
@media (max-width: 767px) {
    .main-navigation {
        width: 100%;
        height: auto;
        position: fixed;
        top: 0;
        left: 0;
    }
    body {
        margin-left: 0;
    }
}

如何添加这些CSS #

你可以通过以下两种方式应用修改：

• 登录WordPress后台，进入「外观」→「自定义」→「额外CSS」，把上述代码粘贴进去后点击「发布」。
• 如果你使用子主题，可将代码添加到子主题的style.css文件中，这样主题更新时不会丢失修改。

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