Adding Phone Number as Button in Header

Support
#1

I have a couple questions regarding adding a phone number in my header.

I’d like the phone number to be in the button on the top right hand corner of the site, but as you can see, the number doesn’t fit correctly. How do I fix this?

Also, I’d like to make it so that when you click that button, it calls the number. Can you tell me how to do this?

Thanks so much!

#2

Hey Brock,

Kindly remove the current menu item that you have added and instead of adding a page menu item, add a Custom Link menu item then set the Link Text to: 304-804-6369 then set the URL to tel:304-804-6369.

Then to style the menu item to look like a button, set a class to the menu item:

Then go to X > Theme Options > CSS and find this block of code:

.x-navbar .desktop .x-nav>li:last-child a {
    background: #1C62A8;
    padding: 0;
    height: 35px;
    width:  100px;
   margin-top: 38px;
    display:  flex;
    justify-content:  center;
    align-items:  center;
    border-radius: 5px;
    transition: 0.4s linear;
}

and update it to:

.x-navbar .desktop .x-nav>li.tel-btn a {
    background: #1C62A8;
    padding: 0;
    height: 35px;
    width:  100px;
    margin-top: 38px;
    display:  flex;
    justify-content:  center;
    align-items:  center;
    border-radius: 5px;
    text-align: center;
    transition: 0.4s linear;
}

The code above assumes that the class you have added to the telephone menu item is tel-btn.

Hope this helps.

#3

Perfect! Thank you so much

#4

You’re most welcome, Brock.

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.