菜单中的电话号码(仅适用于手机)

Question

我想将电话号码添加到我的网站菜单中（仅在移动设备上），触摸该号码后它将拨打电话。到目前为止，我已经有了这个

首先 - 这是菜单的HTML代码

          <div class="rd-navbar-panel">
            <button data-rd-navbar-toggle=".rd-navbar-nav-wrap" 
            type="submit" class="rd-navbar-toggle toggle-original"><span>
            </span></button>
           <div class="rd-navbar-brand"><a href="index.html" class="brand-
            name">    
            <img src="logo.png" style="width: 80px">                
             </a></div><a href="index.html" class="brand-name">
             </a>
           </div>

这就是我想放进去的

 <a href="tel:[phone]">[phone]</a>

但是当我把它放进去时，它不会出现在手机上。如何让它工作？谢谢如果您需要从代码中看到其他内容，请在此处链接我的站点：http://testwebsites.9e.cz/index.html

Answer 1

您的问题是 z 索引。在移动设备上，.rd-navbar-brand覆盖了您的手机锚标签，因为它具有更高的z指数。

尝试

@media screen and (max-width: 480px) { 
.rd-navbar-brand {
position: relative;
left: 0;
}

并将 z-index： 1 添加到您的手机锚标记中。

Answer 2

<div class="address-group">
 <a href="index.html" class="brand-name"></a>
 <a id="mail" href="mailto:#" class="fa-envelope-o">[e-mail]</a>
 <a id="mobileNo" href="tel:[phone]">
   <i class="fa-mobile-phone"></i>
   <span> [phone]</span>
 </a>
</div>

---

#mobileNo{display:none;}
@media screen and (max-width: 480px) {
   .rd-navbar-brand {
      position: relative;
      left: 0;
    }
    #mobileNo{display:block!important;}
    #mail{display:none;}
}