Phone number in header

Support
#1

Hello!

I read similar topics about adding clickable phone number in header (not the slider as shown as I want it to be on every page). It seems above my tech level!

Can you please help?

#2

Hi There,

Thanks for writing in! Because what you are trying to accomplish requires a template customization, we would highly to suggest that you use a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

To resolve your issue, please check out this thread: https://theme.co/apex/forum/t/adding-phone-number-to-header/27854/4

Hope this helps.

#3

Hi RueNel!

Thanks. I downloaded the child and successfully installed. I still don’t get where to actually make the edits.

#4

Hi There @jeff2

Sorry for the confusion here. If want it to be through out every-page, you can simply enable Topbar under X -> Theme Options -> Header area and then add an HTML code on Topbar content area.

Example:
<a href="tel:+11223344"> 011-223344</a>

Hope that helps.

#5

I attempted this but the result was a small number in the left top. I was looking to have it on the right in the white area (no black bar and social media icons).

/*
// Buttons
*/

.x-btn {
font-weight: 700;
}

.x-btn.x-btn-alt,
.button.x-btn-alt,[type=“submit”].x-btn-alt {
border-color: #02aed6;
background-color: #02aed6;
box-shadow: 0 0.25em 0 0 #0b8ead, 0 4px 9px rgba(0, 0, 0, 0.75);
}

.x-btn.x-btn-alt:hover,
.button.x-btn-alt:hover,[type=“submit”].x-btn-alt:hover {
border-color: #0b8ead;
background-color: #0b8ead;
box-shadow: 0 0.25em 0 0 #097690, 0 4px 9px rgba(0, 0, 0, 0.75);
}

/*
// Dropcap
*/

.x-dropcap {
background-color: #02aed6;
}

/*
// Headings - Dark section
*/

.dark-section h1,
.dark-section h2,
.dark-section h3,
.dark-section h4,
.dark-section h5,
.dark-section h6,
.dark-section h1 a,
.dark-section h2 a,
.dark-section h3 a,
.dark-section h4 a,
.dark-section h5 a,
.dark-section h6 a {
color: #fff;
}

.dark-section h1 a:hover,
.dark-section h2 a:hover,
.dark-section h3 a:hover,
.dark-section h4 a:hover,
.dark-section h5 a:hover,
.dark-section h6 a:hover {
color: #fff;
opacity: 0.65;
}

/*
// Sidebar
*/

.widget a {
color: #02aed6;
}

/*
// Contact Form 7
*/

.wpcf7-form {
margin: 0;
}

#6

Hi There,

Thanks for writing in again!

To remove the black bar please go to X -> Theme Options -> Header in the Miscellaneous section you can disable the top bar.

For the for the number, you can add this to the main menu as the last item with the link.
Please add a custom link to your main menu with telephone link and number.

Hope this helps!

#7

Hi Basanta-

Thank you for this help. I tried this before and did again just now…but the end result is not great. It will not show my number on mobile. As for desktop, it shifts my logo upward due to the total length of the menu. Showing the number clearly and on all views is a top priority. Please help!! :slight_smile:

#8

Hi again,

I see you’ve many menu items so your best option to display the Call now text is in the Topbar, please enable the Topbar back and to customize it as per your need, you can add the following code in the Theme Options > CSS:

.x-topbar .x-social-global {
    display: none;
}

.x-topbar .p-info a {
    color: #000 !important;
    font-size: 21px;
    position: absolute;
    right: 20px;
}
.x-topbar {
    background: #fff !important;
}

Hope this helps!

#9

Thanks. That is really helpful. I know I can do br to get the Call us Now on line one and then the number on line two. My question is how I can edit the font to make it look more like this…

#10

Hi,

To achieve that, you can change your topbar content to this

<a href="tel:1-855-670-1345">Call Us Toll Free:  <br><span>1-855-670-1345</span></a>

Then change your css code to this

.x-topbar .x-social-global {
    display: none;
}

.x-topbar .p-info a {
    color: #000 !important;
    font-size: 16px;
    position: absolute;
    right: 20px;
    text-align:right;
    color:blue;
}

.x-topbar .p-info a>span {
   font-size:25px;
   color:black;
}

.x-topbar {
    background: #fff !important;
}

Hope that helps.

#11

Hi Paul,

Thank you. It works great on all platforms but mobile. See below. Can you give me a code to shink and make clickable?

Jeff

#12

Hi again,

Please add the following code as well:

@media screen and (max-width: 767px) {
    .x-topbar .p-info a {
        font-size: 20px !important;
        position: relative !important;
        right: auto !important;
        float: right;
        margin-bottom: 15px;
    }
}

@media screen and (max-width: 480px) {
    .x-topbar .p-info a {
        font-size: 17px !important;
    }
}

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Cheers!

#13

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