Modifying the Header Button's text and action, when on mobile

Is there a way to modify the header button to display different text and perform a different action when clicked, depending on whether the user is on mobile vs not on mobile? On mobile, I would like the text of the header button to read "Call Now" and perform a "Phone" action when clicked. When not on mobile, I would like the text of the header button to read "Contact Us" and perform a "Page" action when clicked, and to bring the user to the "contact" page. I currently have some code that effects the header button, which may or may not be relevant:

/* Show button on mobile menu*/
@media screen and (max-width:1024px) {
    .header-actions-action--cta a {
        border-radius:5px;
        padding: .8em .8em !important
    }

    .header-actions {
        display: block !important
    }

    .header .header-actions-action--cta {
        display: block;
        width: 0% !important;
        padding-right: 0px;
        padding-left: 0px
    }

    .header-title-nav-wrapper {
        flex: 100% !important;
        padding-right: 0px;
        padding-left: 0px
    }
}

Thank you

What is your site url?

On 5/21/2023 at 10:34 PM, tuanphan said:

What is your site url?

https://GADogTrainer.com

Thank you! This worked.