add phone link to mobile navigation/header

Site URL: https://www.johnisaacson.co.uk

Hi there, 

I want to add a mobile icon to the sticky nav in mobile view.

see attachement showing what i want to add, 

how can i do this please?

kind regards, 

john 

Add to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script>
  $(document).ready(function() { 
		$('<a class="tp-phone" href="tel:0123456789"><i class="fa-solid fa-phone"></i></a>').appendTo('.header-burger');
	});
  </script>
<style>
  .header-burger {
    flex-direction: row-reverse;
}
</style>

On 7/15/2022 at 9:39 AM, tuanphan said:

Add to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script>
  $(document).ready(function() { 
		$('<a class="tp-phone" href="tel:0123456789"><i class="fa-solid fa-phone"></i></a>').appendTo('.header-burger');
	});
  </script>
<style>
  .header-burger {
    flex-direction: row-reverse;
}
</style>

 

this is great except the spacing/sizing.

How can i make it equal, level and appropriately spaced and sized to the burger menu.

Add this code under

<style>
  @media screen and (max-width:767px) {
  a.tp-phone {
    position: relative;
    top: -5px;
    left: -20px;
    font-size: 20px;
}
  }
</style>