[Resolved] How to add phone call CTA in top right corner on every page

[Bob]

Hi,

I’m having trouble with adding a phone call CTA in a customized color in top right corner on every page. So that they see “06 12 34 56 78” with a svg phonecall-icon and that when they click on it (on their mobile device) they can automatically dial my number.

I tried using (a) elements and (b) https://gretathemes.com/add-phone-number-wordpress/ (Leo once suggested this in a topic dating from 2020). But I don’t see any chances on my site at all. There might be something off with my primary navigation settings or general settings or something, as adding elements do not result in any changes.

In that regard, I do also wonder how to remove the white stroke under the primary navigation on my “over’ page (i.e. “about us-page”). And what the cause of it, it’s a bit odd. I think that it also shows this white stroke under ‘aanbod en prijzen’, ‘contact’ and ‘blog’, i.e.: all pages (but some of them are the same color as the white strokes so you don’t see them).

Thank you in advance.

Bob

[David]

Hi there,

so phones and other tel enabled devices will spot thats a phone number and make it behave like a link and in turn attract the browser links styles.

Option 1 – make the tel a link,
Edit the button and add your number in the link field with the tel: prefix eg. tel:+1-555-555-5555

This way it will get the GB Block styles.

Option 2 – disable format-detection so the phone doesn’t mess with the number.

1. In Appearance > Elements -> New –> Hook.
2. Add this HTML:

<meta name="format-detection" content="telephone=no">

3. Set the Hook to wp_head

4. Set the Display Rules to Entire Site

5. Publish the hook.

[Bob]

Hi David,

Thanks for your fast reply.

I just found out that my mobile menu is broken. Might be because I really don’t know how to work outside generateblocks lol.

So before I follow your steps (which are super clear by the way), I think it’s wise for me to first fix this problem.

Do you have any idea what’s wrong on onbezorgdontslag.nl. I am struggling for weeks now with customizing outside generateblocks. Maybe it’s because I used a template? I thinkt that I really have some underlying problems with my site (customization-part) that I need to fix first.

Thanks in advance.

[Ying]

I just found out that my mobile menu is broken

It seems working fine. You are using the off-canvas panel, it is empty now, you need to assign a menu to it:
https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#setting-a-theme-location

[Bob]

Hi Ying,

Okay, that’s a bit awkward haha.

But thanks alot.

Wouldn’t know what to do without you guys 😉

Going to try David’s recommendation now.

[Bob]

Solved this one.

[Bob]

And I still have gaps between the primary menu and pages on desktop. I have no clue what to do, and I have this problem since I began building my website…

[Fernando]

Hi Bob,

For reference, can you provide the link to the site in question?

You may use the Private Information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

[Bob]

onbezorgdontslag.nl

Thank you.

[David]

Go to Customizer > Layout > Container.
And reduce the Top Padding value.

[Bob]

Thanks David!

[David]

You’re welcome

[Author]

Posts