如何在移动端特定线索表单页将汉堡菜单替换为可点击电话号码

实现方法 #

方法1：模板修改+CSS控制（最稳定） #

1. 补全你手头的电话按钮代码，补充<a>标签的闭合结构，新增专属类名mobile-call-btn用于后续样式控制：

<a href="tel:+44800********" class="btn btn-orange text-dark-blue mobile-call-btn"><i class="fas fa-phone-alt" aria-hidden="true"></i> 0800 *** ***</a>

2. 将上述代码添加到你站点导航栏模板中，和原汉堡菜单.navbar-toggler同级放置。
3. 将以下CSS代码添加到站点自定义样式表中：

/* 桌面端隐藏移动端专用电话按钮，不影响现有桌面布局 */
.page-id-547 .mobile-call-btn {
  display: none;
}

/* 适配移动端断点，可根据你站点实际导航折叠的宽度调整767px的数值 */
@media (max-width: 767px) {
  /* 原有隐藏汉堡菜单的代码保留，加!important避免被原有样式覆盖 */
  .page-id-547 .navbar-toggler {
    display: none !important;
  }
  /* 移动端显示电话按钮，调整边距、尺寸匹配原汉堡菜单的位置 */
  .page-id-547 .mobile-call-btn {
    display: inline-flex;
    align-items: center;
    /* 以下数值可根据你站点实际布局微调，和原汉堡位置对齐即可 */
    margin: 0 15px 0 0;
    padding: 6px 12px;
  }
}

方法2：JS动态插入（无需修改模板） #

如果没有权限修改站点模板代码，可以直接用JS动态替换元素，将以下代码添加到页面自定义脚本区域即可：

if (document.body.classList.contains('page-id-547')) {
  function replaceNavToggler() {
    const toggler = document.querySelector('.page-id-547 .navbar-toggler');
    if (!toggler) return;
    // 小于768px宽度时执行替换
    if (window.innerWidth < 768) {
      const callBtn = document.createElement('a');
      callBtn.href = 'tel:+44800********';
      callBtn.className = 'btn btn-orange text-dark-blue';
      callBtn.innerHTML = '<i class="fas fa-phone-alt" aria-hidden="true"></i> 0800 *** ***';
      toggler.parentNode.replaceChild(callBtn, toggler);
    } else {
      // 窗口放大到桌面端时恢复汉堡菜单（可选）
      toggler.style.display = 'block';
    }
  }
  // 页面加载和窗口大小变化时都执行判断
  window.addEventListener('load', replaceNavToggler);
  window.addEventListener('resize', replaceNavToggler);
}

验证注意 #

修改完成后清除站点缓存、移动端浏览器缓存，再刷新页面确认效果，按钮的边距、尺寸可根据实际展示效果调整CSS数值即可。

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