Add Email – Phone Icons to Burger Menu

Suppose you want to add an email & phone icon like this:

#1. Use this code to Code Injection – Footer

<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" />
  <ul class="t-social">
<li>
  <a href="mailto:[email protected]">
  <i class="fa-regular fa-envelope"></i>
  </a>
</li>
<li>
  <a href="tel:+441224356040">
  <i class="fa-solid fa-phone"></i>
  </a>
</li>
</ul>

It will appear at the bottom of the site, like this

#2. Use this code to Code Injection – Footer, under #1 code.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($){
  $('ul.t-social').appendTo('.header-menu-nav-wrapper');
})
</script>

You will have

#3. Use this code to Custom CSS box

ul.t-social {
    margin-left: 5vw;
    padding-left: 2vw;
    display: none;
    align-items: center;
}
header#header ul.t-social {
    display: flex;
}
ul.t-social li {
    margin-right: 5.5vw;
    margin-top: 2.5vw;
}

You will have