移动端Navbar激活链接gradient色彩失效问题求助

问题说明 #

适配屏幕的导航栏分为大屏、小屏两种样式，激活状态的链接使用全站统一渐变色彩，但移动端导航栏的渐变效果无法正常显示，尽管和大屏版使用了完全相同的active类（大屏版效果正常）。

效果对比 #

• 大屏正确效果：
• 移动端错误效果：

相关代码 #

HTML #

<header id="header">
        <nav id="menu">
            <a id="home" class="active large" onclick="goTo(id)">Home</a>
            <a id="presentation" class="large" onclick="goTo(id)">Chi sono</a>
            <a id="portfolio" class="large" onclick="goTo(id)">Portfolio</a>
            <a id="social" class="large" onclick="goTo(id)">Social</a>
            <a id="contactMe" class="large" onclick="goTo(id)">Contattami</a>
            <img class="iconaMenu small" src="Assets/Icons/menu.svg" alt="Menu" onclick="toggleMenu()" draggable="false">
        </nav>
        <div id="menu-small" class="hidden">
            <a id="home" onclick="goTo(id)">Home</a>
            <a id="presentation" class="active" onclick="goTo(id)">Chi sono</a>
            <a id="portfolio" onclick="goTo(id)">Portfolio</a>
            <a id="social" onclick="goTo(id)">Social</a>
            <a id="contactMe" onclick="goTo(id)">Contattami</a>
        </div>
</header>

CSS #

nav {
    background-color: var(--bgColor);
    color: var(--disabledTxtColor);
    font-size: .9rem;
    position: fixed;
    top: 0;
    display: flex;
    width: 100%;
    height: 4rem;
    gap: 2rem;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    padding-right: 2rem;
    z-index: 3;
}
#menu-small {
    background-color: var(--bgColor);
    color: var(--disabledTxtColor);
    font-size: 1rem;
    position: fixed;
    top: 4rem;
    display: flex;
    width: 100%;
    height: 15rem;
    gap: 1.8rem;
    flex-direction: column;
    justify-content: start;
    text-align: center;
    border-radius: 0 0 20px 20px;
    z-index: 2;
    /* transition: all ease-in-out 0.2s; */
}
.hidden { display: none !important; }
.iconaMenu { width: 1.5rem; }
.iconaMenu:active { transform: scale(0.95); }
nav a, #menu-small a { cursor: pointer; }
nav a.active, #menu-small a.active {
    background: rgb(144,122,214);
    background: linear-gradient(90deg, rgba(144,122,214) 0%, rgba(119, 143, 181) 25%, rgba(255,104,107) 50%, rgb(20, 160, 152) 75%, rgb(255, 170, 110) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
@media (max-width: 1007px) { nav { padding-right: 1.5rem; } }

JavaScript #

// 导航链接跳转逻辑
function goTo(daAttivare) {
  closeMenu();
  const targetSection = document.getElementById(daAttivare + "Page");
  window.scroll({
    top: targetSection.offsetTop - (4 * parseFloat(getComputedStyle(document.documentElement).fontSize)),
  });
}

// 导航激活状态切换
const navSections = document.querySelectorAll("#homePage, #presentationPage, #portfolioPage, #socialPage, #contactMePage");
const navLinksLarge = document.querySelectorAll("#menu a");
const navLinksSmall = document.querySelectorAll("#menu-small a");
let currentNavSectionIndex = 0;

window.addEventListener("scroll", () => {
  closeMenu(); // 滚动时关闭移动端菜单
  navSections.forEach((section, index) => {
      if (window.pageYOffset + (document.body.scrollHeight * 0.04) >= section.offsetTop) currentNavSectionIndex = index;
    });
  
    navLinksLarge.forEach((link, index) => {
      link.classList.toggle("active", index === currentNavSectionIndex);
    });
  
    navLinksSmall.forEach((link, index) => {
      link.classList.toggle("active", index === currentNavSectionIndex);
    });
});

// 移动端菜单控制
let isMenuShown = false;
const menuPopup = document.getElementById("menu-small");
const pageContent = document.getElementById("pageContent");

function toggleMenu() {
  isMenuShown = !isMenuShown;
  menuPopup.classList.toggle("hidden");
  pageContent.classList.toggle("contentBlur");
}

function closeMenu() {
  if (isMenuShown) {
    isMenuShown = false;
    menuPopup.classList.add("hidden");
    pageContent.classList.remove("contentBlur");
  }
}

function screenResize() {
  if (window.innerWidth >= 450) closeMenu();
}

pageContent.addEventListener('mousedown', closeMenu, {passive: true});
pageContent.addEventListener('touchstart', closeMenu, {passive: true});
window.addEventListener("resize", screenResize, {passive: true});

问题原因及解决方案 #

核心问题 #

1. CSS继承与透明度冲突：#menu-small父元素设置了color: var(--disabledTxtColor)，该颜色会被内部<a>标签继承。尽管active类设置了-webkit-text-fill-color: transparent，但部分移动端浏览器会优先继承父元素的color值，导致渐变文字无法显示。
2. 重复ID问题：大屏和小屏导航链接使用了相同的ID（如home、presentation），违反HTML规范，可能导致JS选择元素异常，也会影响样式优先级判断。

修复步骤 #

1. 修正HTML重复ID

将小屏导航的ID改为唯一值，避免冲突：

<div id="menu-small" class="hidden">
    <a id="home-small" onclick="goTo('home')">Home</a>
    <a id="presentation-small" class="active" onclick="goTo('presentation')">Chi sono</a>
    <a id="portfolio-small" onclick="goTo('portfolio')">Portfolio</a>
    <a id="social-small" onclick="goTo('social')">Social</a>
    <a id="contactMe-small" onclick="goTo('contactMe')">Contattami</a>
</div>

2. 调整CSS样式

• 将导航链接的color属性直接设置在<a>标签上，移除父元素的color设置
• 在active类中新增color: transparent，确保移动端浏览器能正确识别文字透明效果

修改后的CSS片段：

#menu-small {
    background-color: var(--bgColor);
    /* 移除此行：color: var(--disabledTxtColor); */
    font-size: 1rem;
    /* 其余样式保留 */
}

nav a, #menu-small a { 
    cursor: pointer; 
    color: var(--disabledTxtColor); /* 新增此行，统一设置非激活态文字颜色 */
}

nav a.active, #menu-small a.active {
    background: rgb(144,122,214);
    background: linear-gradient(90deg, rgba(144,122,214) 0%, rgba(119, 143, 181) 25%, rgba(255,104,107) 50%, rgb(20, 160, 152) 75%, rgb(255, 170, 110) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent; /* 新增此行 */
    -webkit-text-fill-color: transparent;
}

3. 验证JS逻辑

由于修改了小屏导航的ID，需确认JS中navLinksSmall = document.querySelectorAll("#menu-small a")仍能正确选择所有小屏链接，当前代码已满足此要求，无需额外修改。

完成以上修改后，移动端导航栏的active链接渐变文字即可正常显示。

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