WordPress OceanWP主题移动端头部布局（菜单/Logo/购物车）调整求助

Hey there, I get exactly what you're trying to do—switching the mobile header order from logo → cart → menu to menu → logo → cart on your OceanWP WooCommerce site. Your existing CSS was a good start, but we need to tweak the flex layout and element ordering to get the desired result. Here's a revised CSS snippet that should do the trick:

@media only screen and (max-width: 959px) {
    /* 重置头部容器为flex布局，确保元素垂直居中 */
    div#site-header-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    /* 把移动端菜单图标设为第一个显示 */
    .oceanwp-mobile-menu-icon.clr.mobile-right {
        order: 1;
        height: auto;
        line-height: inherit; /* 取消硬编码行高，用flex对齐更灵活 */
    }

    /* 让Logo居中显示在中间位置 */
    .site-logo {
        order: 2;
        flex: 1; /* 占据中间可用空间 */
        text-align: center;
    }

    /* 把购物车图标设为最后一个显示 */
    .header-cart-wrap {
        order: 3;
    }

    /* 移除之前设置的固定宽度，避免干扰flex布局 */
    .top-header-wrap.clr,
    .bottom-header-wrap.clr {
        width: auto;
    }
}

代码细节说明： #

• #site-header-inner 的flex布局搭配 align-items: center，确保所有头部元素垂直居中对齐，justify-content: space-between 为自定义排列顺序打好基础。
• order 属性是核心：数值越小的元素越靠前，所以给菜单设order:1、Logo设order:2、购物车设order:3，就能实现菜单→Logo→购物车的顺序。
• .site-logo 加上 flex:1 和 text-align:center，保证它在菜单和购物车之间的空间里居中显示，不会被两边元素挤压变形。
• 移除了你之前设置的.top-header-wrap和.bottom-header-wrap的固定50%宽度，避免和flex布局冲突导致错乱。
• 取消菜单图标硬编码的line-height:100px，改用flex的垂直对齐方式，适配不同屏幕尺寸更可靠。

如果购物车元素的class不是.header-cart-wrap（主题偶尔会用不同命名），可以右键点击购物车图标→选择「检查」，找到它的实际class名替换即可。

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