移动端页脚导航菜单1列改2列CSS代码失效求助

你之前编写的.gh-foot-menu .nav {column-count:2;}未生效，主要有两个原因：

• 选择器权重不足，被站点主题自带的移动端样式覆盖
• 导航容器原有的flex/grid布局属性、子列表项的默认排版规则会干扰多列布局的渲染逻辑

可直接使用下方CSS代码实现需求，代码已做适配处理：

/* 限定仅移动端视图生效，可根据站点实际断点调整max-width数值 */
@media screen and (max-width: 767px) {
  .gh-foot-menu .nav {
    column-count: 2 !important;
    column-gap: 20px;
    /* 重置冲突的布局属性 */
    display: block !important;
    padding: 0;
  }
  .gh-foot-menu .nav li {
    /* 避免单个导航项被拆分到两列 */
    break-inside: avoid;
    margin: 6px 0;
    width: 100%;
  }
}

使用说明：

• 将上述代码粘贴到站点后台的「自定义CSS」输入框最底部保存，清除缓存后即可生效
• 代码中column-gap为两列之间的间距，margin为单个导航项的上下边距，可根据实际视觉需求调整数值
• 如果你的站点移动端触发断点不是767px，修改媒体查询中max-width的对应像素值即可

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