[Resolved] clickable phone number above primary navigation

[Tania]

https://www.smartchampstuition.co.uk/

I want to add clickable phone number and email on top of primary navigation towards right. So clients can call.

Also how I can add clickable phone number as a button and as clickable text in footer and on contact page..

Right now the phone number dials +10000000000 which was entered on GP sample services site. How I can change this. I tried it has not worked.

I also want its colour change when hover, on contact page.

[Tania]

I tried to add clickable phone and email using top bar. However, I the top bar vanishes when you scroll, how can I make top bar sticky? on mobile and desktop.

Please reply thanks a lot.

[Tania]

please can you help?

[Leo]

Hi there,

I want to add clickable phone number and email on top of primary navigation towards right.

Try this:
– Create a hook element:
https://docs.generatepress.com/article/hooks-element-overview/

– Add this as the content:

<div class="sticky-phone">
    phone number here
</div>

– Select the generate_inside_navigation hook in the Hook dropdown list.

– Set priority to 2.

– Add this CSS:

.sticky-phone {
    width: 100%;
    text-align: right;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know if this helps 🙂

[Tania]

Please have aa look what I did. I have added html for other clickable phone numbers.

Shall I take top bar off, I added through the top bar which I can’t make it sticky as when scrolling down, the top bar disappear.?

[Leo]

Shall I take top bar off

Yes – then follow the exact steps I’ve described here:
https://generatepress.com/forums/topic/click-able-phone-button-and-clickable-phone-number-without-button/#post-1540573

[Tania]

thanks a lot.

[Leo]

No problem 🙂

Please note that we answer every topic within 24 hours – most of the time it’s much shorter.

It is also Saturday here so we appreciate your patience 🙂

[Tania]

Is there a way to make phone clickable, so number could be called on mobile?

Many thanks

[Leo]

This should help:
https://developers.google.com/web/fundamentals/native-hardware/click-to-call#link_telephone_numbers_for_click_to_call

[Tania]

thanks. I wanted phone number sticky on the right side, above the blog contact navigation.

However this appears on the left before the site logo. I tried to move before navigation altering the hook, then it is on the page hero above navigation as my navigation is on top of the page heroes. Not ideal..

[Leo]

My CSS should work.

It’s not working as you’ve wrapped in with the previous media query:
https://www.screencast.com/t/XtVSMeiJjClg

Can you make sure the previous media query is closed with a }?

[Tania]

Leo. Thanks a lot for your help.

Exactly, I have seen that, closed the previous enquiry. CSS has worked fine. I added some padding in the CSS.

Now I want to add phone icon on the left side of the phone number. Shall I start new enquiry?

[David]

Hi there.

as you have the Lightweight Social Icons plugin installed, and that has a phone icon we can use its code on your anchor element. So this:

<a href="tel:02034887476">Call Us On: 020 3488 7476</a>

becomes:

<a href="tel:02034887476"><i class="lsicon lsicon-phone"></i> Call Us On: 020 3488 7476</a>

[Tania]

Thanks a lot David for your time and patience.

It was awesome.

[Author]

Posts