- This topic has 8 replies, 2 voices, and was last updated 10 months ago by Leo.
November 25, 2019 at 12:25 pm #1076879Izzy
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?
<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.November 25, 2019 at 12:28 pm #1076885Izzy
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.November 25, 2019 at 12:48 pm #1076915LeoStaffCustomer Support
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?
You shouldn’t need a header element at all.November 25, 2019 at 1:09 pm #1076940Izzy
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.November 25, 2019 at 1:20 pm #1076956LeoStaffCustomer Support
Currently, none of the links here are working:
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:
It would work better overall.
Let me know if this helps 🙂November 25, 2019 at 1:57 pm #1076996Izzy
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.November 25, 2019 at 4:18 pm #1077126LeoStaffCustomer SupportNovember 25, 2019 at 4:34 pm #1077140Izzy
Oooooh I see. That makes sense. Thank you Leo!November 25, 2019 at 5:31 pm #1077187
- You must be logged in to reply to this topic.