Genesis框架移动端：如何让Logo与汉堡菜单同行

Hey John,

针对你提到的Genesis子主题移动端头部空间过大、无法让Logo和汉堡菜单同行的问题，我帮你整理了CSS调整方案，直接添加到你的子主题样式表（style.css）里就能生效：

/* 移动端头部Logo与汉堡菜单同行调整 */
@media only screen and (max-width: 768px) {
    /* 缩小标题区域的上下内边距，压缩头部高度 */
    .wp-custom-logo .title-area {
        padding-top: 10px;
        padding-bottom: 10px;
        max-width: 220px; /* 根据你的Logo比例调整，确保给汉堡菜单留出空间 */
    }

    /* 让Logo自适应标题区域宽度，避免溢出 */
    .wp-custom-logo .title-area img {
        width: 100%;
        height: auto;
    }

    /* 减少头部左右内边距，进一步优化移动端空间 */
    .site-header {
        padding: 0 15px;
    }
}

调整说明： #

• 媒体查询适配：max-width: 768px覆盖了绝大多数手机和平板竖屏场景，只在移动端生效，不会影响桌面端布局。
• 压缩头部高度：通过缩小标题区域的上下内边距，直接减少头部的垂直空间。
• Logo尺寸控制：设置标题区域的最大宽度，并让Logo自适应这个宽度，确保它能和汉堡菜单在同一行显示。
• 优化横向空间：缩小头部的左右内边距，避免移动端屏幕空间被浪费。

你可以根据自己Logo的实际比例微调max-width和内边距的数值，直到达到理想的显示效果。调整后，头部空间会明显压缩，联系表单区域也会有更多可用空间，键盘弹出时的遮挡问题也会得到缓解。

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