Shopify（Liquid）区块Header样式异常，寻求修复方案

现有代码 #

Liquid代码 #

<header class="header header--middle-left header--mobile-center page-width header--has-menu">
  
  <nav class="header__inline-menu">
    <div class="links-container">
      <ul class="list-menu list-menu--inline" role="list">
        <li>
          <a id="HeaderMenu-home" href="/" class="header__menu-item list-menu__item link link--text focus-inset" aria-current="page">
            <span class="header__active-menu-item">Home</span>
          </a>
        </li>
        <li>
          <a id="HeaderMenu-catalog" href="/collections/all" class="header__menu-item list-menu__item link link--text focus-inset">
            <span>Lookbook</span>
          </a>
        </li>
        <li>
          <a id="HeaderMenu-contact" href="/pages/contact" class="header__menu-item list-menu__item link link--text focus-inset">
            <span>Necklace Stacking</span>
          </a>
        </li>
      </ul>
    </div>
  </nav>
  
</header>

CSS代码 #

.links-container {
  position: absolute;
  width: 343px;
  height: 24px;
  top: 50px;
  left: 75px;
  display: flex;
  gap: 16px;
  opacity: 1;
  background: none;
  z-index: 10;
  align-items: center;
}

.links-container a {
  text-decoration: none;
  color: inherit;
}

.header__inline-menu {
  position: absolute;
  width: 343px;
  height: 24px;
  top: 50px;
  left: 75px;
  display: flex;
  gap: 16px;
  opacity: 1;
  background: none;
  z-index: 10;
  align-items: center;
}

.list-menu--inline {
  display: flex;
  align-items: center;
  gap: 16px;
}

.list-menu--inline li {
  list-style: none;
}

当前问题 #

页面Header的对齐、样式均不符合预期，布局混乱。

已尝试操作 #

检查并调整过定位、对齐属性，未达到预期效果。

修复建议 #

当前核心问题是重复设置绝对定位：.header__inline-menu和.links-container两个嵌套元素都设置了相同的position: absolute及定位参数，导致布局层级冲突，菜单排列错乱。调整方案如下：

1. 移除内层.links-container的绝对定位属性，保留外层nav的定位控制：

.links-container {
  /* 移除冗余的绝对定位属性 */
  display: flex;
  gap: 16px;
  opacity: 1;
  background: none;
  z-index: 10;
  align-items: center;
}

.header__inline-menu {
  position: absolute;
  width: auto; /* 改为auto，由内容撑开宽度 */
  height: 24px;
  top: 50px;
  left: 75px;
  display: flex;
  gap: 16px;
  opacity: 1;
  background: none;
  z-index: 10;
  align-items: center;
}

2. 调整菜单对齐方式：根据预期效果给.list-menu--inline添加justify-content属性，比如：

.list-menu--inline {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: space-between; /* 可选center/flex-end，按需选择 */
}

3. 覆盖主题默认样式：如果Shopify主题自带样式干扰显示，可增加选择器权重或用!important强制覆盖，比如：

.header__menu-item {
  font-size: 16px;
  font-weight: 400;
  text-decoration: none !important;
  color: #000 !important; /* 按预期设置颜色 */
}

4. 简化Liquid结构：移除冗余的.links-container嵌套，减少层级冲突：

<header class="header header--middle-left header--mobile-center page-width header--has-menu">
  <nav class="header__inline-menu">
    <ul class="list-menu list-menu--inline" role="list">
      <li>
        <a id="HeaderMenu-home" href="/" class="header__menu-item list-menu__item link link--text focus-inset" aria-current="page">
          <span class="header__active-menu-item">Home</span>
        </a>
      </li>
      <li>
        <a id="HeaderMenu-catalog" href="/collections/all" class="header__menu-item list-menu__item link link--text focus-inset">
          <span>Lookbook</span>
        </a>
      </li>
      <li>
        <a id="HeaderMenu-contact" href="/pages/contact" class="header__menu-item list-menu__item link link--text focus-inset">
          <span>Necklace Stacking</span>
        </a>
      </li>
    </ul>
  </nav>
</header>

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