Add a phone icon to mobile sticky menu

Get the element's ID

If you haven't done so already, you'll need to add a phone icon widget to your header and link it to the desired phone number. Once you have your widget added, open the site in a new browser tab (outside of the builder), right-click on the phone icon, and select "inspect".

From the HTML panel, copy the ID of the div element. It will look like "header-widget-XXXXXXXX".

Lesson Guide

Now replace the ID in the sample code below with your header ID and add the code to your body markup (makes sure to keep the ' ' and #) 

JS JQuery

<script>

  //replace the header widget id with your own

$('#header-widget-1638182136834').clone().addClass('phone-icon-mobile').appendTo('.mobile-menu, .fixed-header-wrapper');

</script>

Now we'll use CSS to apply style rules on the class we just added to the element. 

CSS

@media only screen and (max-width: 768px){

  .phone-icon-mobile {

      display: block;

      width: 22px;

      position: absolute;

      z-index: 999999;

      padding: 10px;

      right: 20px;

      top: 50%;

      -webkit-transform: translate(0,-50%);

         -moz-transform: translate(0,-50%);

          -ms-transform: translate(0,-50%);

              transform: translate(0,-50%);

  }

  .phone-icon-mobile a i {

      font-size: 26px!important; /*adjust size of icon*/

  }

}