Tel link not working on iphone

I made this page using Bootstrap 4.


<li class="nav-item"><a class="nav-link" href="tel:1-603-953-4826"><i class="fa fa-phone"></i></a></li>

on a website, I made for my son. The link doesn't dial on my iphone 6s.<i> is Font Awesome. Any clue 

When you click on the phone link with the iphone 6s, does it do anything at all? Does it bring up the phone app?

OK I got it to work now. Thanks for your help with it. I accidentally had an extra " in the code. :frowning:

Sorry, I meant to also ask, when the nav link is clicked and it takes you to the section, the menu stays open. How can I make it so the navbar auto closes?

<nav class="navbar fixed-top navbar-toggleable-md navbar-inverse navbar-custom">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  <a class="navbar-brand" href="#top">LEGGACY SOCCER</a>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mx-auto">
        <li class="nav-item">
            <a class="nav-link" href="#about">About</a>
        <li class="nav-item">
            <a class="nav-link" href="#lessons">Lessons</a>
         <li class="nav-item">
            <a class="nav-link" href="#contact">Contact</a>
   <ul Class="nav navbar-nav flex-row">
 <li class="nav-item"><a class="nav-link" href="" target="_blank"><i class="fa fa-facebook">&nbsp;</i></a></li>
 <li class="nav-item"><a class="nav-link" href="" target="_blank"><i class="fa fa-twitter">&nbsp;</i></a></li>
 <li class="nav-item"><a class="nav-link" href="" target="_blank"><i class="fa fa-instagram">&nbsp;</i></a></li>
 <li class="nav-item"><a class="nav-link" href=""><i class="fa fa-envelope">&nbsp;</i></a></li>
 <li class="nav-item"><a class="nav-link" href="tel:1-603-953-4826"><i class="fa fa-phone">&nbsp;</i></a></li>

So you only want to see the navbar if someone is scrolled all the way to the top of the page?

It would be better if the navbar stayed fixed but did not cover the content. Check out this information on .navbar-fixed-top

I added fixed-top, and edited my code in the above post. I do want the navbar to be always seen like that. The only issue I’m having is when you click on a nav link and it takes you to the section, the navbar stays open

example image

EDIT; I solved it