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