Blogger SOHO主题：如何在桌面端始终显示汉堡菜单而非侧边栏

嘿，我来帮你解决Blogger SOHO主题的菜单显示问题！要实现大屏设备上始终显示汉堡菜单、点击才展开侧边栏的效果，咱们主要靠CSS就能搞定，不用折腾太多HTML，具体步骤如下：

SOHO主题默认在大屏下隐藏汉堡菜单、展示侧边栏，我们只需覆盖这些默认的媒体查询规则即可：

1. 隐藏大屏下的默认展开侧边栏
   打开你的Blogger后台，进入「主题→自定义→高级→添加CSS」，粘贴这段代码：

/* 大屏设备（宽度≥992px）下隐藏默认展开的侧边栏 */
@media screen and (min-width: 992px) {
  .sidebar-container {
    display: none !important;
    visibility: hidden !important;
  }
}

2. 让汉堡菜单在大屏上始终显示
   默认大屏下汉堡菜单会被CSS隐藏，我们把它强制显示出来：

/* 大屏设备下显示汉堡菜单按钮，位置匹配小屏的左上角样式 */
@media screen and (min-width: 992px) {
  .menu-toggle-button {
    display: block !important;
    visibility: visible !important;
    position: relative;
    left: 0;
    top: 0;
    /* 如果你的主题里按钮有其他样式冲突，可根据需求调整margin/padding */
  }
}

3. 确保点击汉堡菜单时侧边栏正常展开
   为了让大屏下点击汉堡菜单后侧边栏能正常弹出，我们补充这段样式：

/* 大屏下点击汉堡菜单后，侧边栏展开的样式（可根据主题风格调整） */
@media screen and (min-width: 992px) {
  .sidebar-container.active {
    display: block !important;
    visibility: visible !important;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 9999;
    background: #fff; /* 替换成你主题的背景色 */
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
    padding: 20px; /* 可选，优化侧边栏内边距 */
  }
}

极少数情况下，主题可能在大屏下直接从DOM中移除了汉堡菜单按钮（不是单纯隐藏），这时候需要进入「主题→编辑HTML」：

• 搜索带有menu-toggle-button类的代码块
• 把它从包裹它的媒体查询条件（比如@media screen and (max-width: 991px)）中移出来，放到全局的页眉区域，这样不管屏幕大小都会渲染这个按钮。

不过大部分SOHO主题的汉堡菜单只是被CSS隐藏，所以方法一基本就能解决问题。

添加完代码后，记得在桌面端、平板、手机上分别测试：

• 大屏：确认汉堡菜单显示在左上角，点击后侧边栏弹出，不点击时侧边栏隐藏
• 小屏：原有汉堡菜单功能不受影响

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