Archived topic
HTML a tag and tel: links
8 replies · Started by Izzy on November 25, 2019
Support,
I have a header element with a telephone number. However, for some reason it's no clickable.
However, the exact same code is clickable in codepen and when I use a raw .htm file with the same code. Any suggestions?
Codepen: https://codepen.io/IzzyNinja/pen/zYYQVzy
Site: http://dev.itninjas.tech/
Code:
<div class='phoneNumber'>
<div><img src='http://dev.itninjas.tech/wp-content/uploads/2019/11/phone-call.svg' alt='Phone Icon' />
<a href="tel://+15555555555">+1 (555) 555-5555</a></div>Thank you in advance for your attention on this matter.
Apparently the code is also clickable in the forum. Super perplexed by this. In addition, I have added said code as html in the gutenberg editor as an html object, and again it works. http://dev.itninjas.tech/sample-page/ is the example. There seems to be some sort of issue with header element itself.
Hi there,
Are you referring to the home page?
Any reason you are using a merged header element to create that layout instead of using the default top bar widget area?
https://docs.generatepress.com/article/top-bar-widget-area/
You shouldn't need a header element at all.
Leo,
Yes, homepage, and I've linked another page that also has the html as a gutenberg element and it is functional.
I'm not sure what difference using a top bar widget or header element makes. Personally I like to be able to customize all of my css classes and ids, as well as the html directly, which is why I used an element.
Irregardless of approach, none of this answers why the tel: link is not functioning. Is there a scenario where it works in the top bar widget and not a header element? I'm not sure what relevance the question you proposed has.
Currently, none of the links here are working:
https://www.screencast.com/t/8stUqeSQWS
That is because you have a merged header element which is simply blocking everything.
There really isn't any point for you to use header element to create a layout like that.
I would recommend using these two options here to accomplish that exact layout:
https://docs.generatepress.com/article/navigation-as-a-header/
https://docs.generatepress.com/article/top-bar-widget-area/
It would work better overall.
Let me know if this helps :)
Leo,
Interesting! I was unaware that the merge feature of the site header would restrict a tags.
I understand that using built-in functionality is ideal, especially in support scenarios. Still, I really like having direct control over the all of the code. With that in mind, I did two thing: first, I edited the element site header to be "no merge". Second, I disabled the header element in the page itself. Things are now functioning as I had hoped.
I explored the top bar widget option, and the header navigation as well. I am trying to make every object in my design response, thus I am restricting myself to the following units: em, rem, and %. It'd be nice to see these units as options in the GUI-based page customizer in future releases for all objects that can be adjusted. It seems % is available, but only for some objects. For now, these units require applying CSS to the objects. Not a big deal, but food for thought.
As always, thank you Leo! Cases closed.
The merged header isn't restricting the <a> tag, it's simply covering that section of content.
Glad you found a solution :)
Oooooh I see. That makes sense. Thank you Leo!
No problem :)
