Buy me a coffee

Add Email – Phone Icons to Burger Menu

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

add-email-phone-icons-to-burger-menu-05-min

#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>

add-email-phone-icons-to-burger-menu-01-min

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

add-email-phone-icons-to-burger-menu-02-min

#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>

add-email-phone-icons-to-burger-menu-03-min

You will have

add-email-phone-icons-to-burger-menu-06-min

 

#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;
}

add-email-phone-icons-to-burger-menu-04-min

You will have

add-email-phone-icons-to-burger-menu-05-min

Ask me a question, free

If your site is private or in trial, just setup password and share url. See how to: https://beaverhero.com/squarespace-how-to/
Please check your email carefully. Recently I got a lot of questions with wrong emails.

If you haven't heard from me within 24 hours please check your junk/spam folder