Bunu nasıl yapmışlar?

Bu şekilde yaptım. WhatsApp mesaj ve hemen ara butonu için gerekli linklemeyi sizin yapmanız lazım. Aşağıdaki CSS kodunu, hangi çözünürlükten sonra gözükmesini istiyorsanız oraya ekleyin.

/* MOBÄ°L BAR */

.mobilbararkaplan {
    width: 100%;
    position:fixed;
    bottom:0;
    height: 50px;
    z-index:9999;
}

.mobilbararkaplan a {
    color:white;
    text-decoration:none;
}

.mobilbarwhatsapp, .mobilbarhemenara{
    width: 50%;
    height: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
}

.mobilbarwhatsapp i, .mobilbarhemenara i{
    margin-right: 10px;
}

.mobilbarwhatsapp {
    float:left;
    background:#189e0e;
}

.mobilbarhemenara {
    float:right;
    background:#085fcb;
}

/* MOBÄ°L BAR SON */

Ardından header.php dosyasını açın ve aşağıdaki HTML kodunu sayfanın en altına ekleyin.

<div class="mobilbararkaplan">
    <a href="https://www.LÄ°NKEKLEYÄ°N.com">
    <div class="mobilbarwhatsapp">
        <i class="fab fa-whatsapp"></i>WhatsApp
    </div>
    </a>
    <a href="https://www.LÄ°NKEKLEYÄ°N.com">
    <div class="mobilbarhemenara">
        <i class="fas fa-phone-volume"></i>Hemen Ara
    </div>
    </a>
</div>

LİNKEKLEYİN yazan kısımları düzenlemeniz gerekiyor.

NOT : İkonlar için FontAwesome'un 5.15.4 sürümünü kullandım. Sizde yeni çıkan sürüm kuruluysa ikonları değiştirmeniz gerekebilir. Bunun için sitesini ziyaret edebilirsiniz.

Hocam çok sağolasın öncelikle, " hangi çözünürlükten sonra" derken, mobilde görünecek şekilde ayarlamak için nereyi değiştirmem gerekiyor? bu alt kısımdaki genişlik ve yüksekliği mi değiştireyim?

.mobilbarwhatsapp, .mobilbarhemenara{
width: 50%;
height: 100%;
justify-content: center;
align-items: center;
display: flex;
}

/* MOBÄ°L BAR */
 
.mobilbararkaplan {
    width: 100%;
    position:fixed;
    bottom:0;
    height: 50px;
    z-index:9999;
}
 
.mobilbararkaplan a {
    color:white;
    text-decoration:none;
}
 
.mobilbarwhatsapp, .mobilbarhemenara{
    width: 50%;
    height: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
}
 
.mobilbarwhatsapp i, .mobilbarhemenara i{
    margin-right: 10px;
}
 
.mobilbarwhatsapp {
    float:left;
    background:#189e0e;
}
 
.mobilbarhemenara {
    float:right;
    background:#0f2b65;
}
 
/* MOBÄ°L BAR SON */

[/CSSR]@Caxing; öyle bir kod olmayabilir mi

Siteniz responsive değil mi ? Style.css içerisinde veya başka bir css dosyası varsa onun içerisinde @media şeklinde aratır mısınız ?

@Caxing; hallettim hocam CSS'ine şu kodu ekledim. Tekrar teşekkür ederim.

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

Bunu ekledikten sonra kapatmanız da gerekiyor. Kodların bittiği yere } eklediniz değil mi ?

bu ÅŸekilde ekledim hocam.