- This topic has 8 replies, 2 voices, and was last updated 4 years, 4 months ago by Leo.
-
AuthorPosts
-
November 25, 2019 at 12:25 pm #1076879Izzy
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.
November 25, 2019 at 12:28 pm #1076885IzzyApparently 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 SupportHi 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.
November 25, 2019 at 1:09 pm #1076940IzzyLeo,
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 SupportCurrently, none of the links here are working:
https://www.screencast.com/t/8stUqeSQWSThat 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 π
November 25, 2019 at 1:57 pm #1076996IzzyLeo,
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 SupportThe merged header isn’t restricting the
<a>
tag, it’s simply covering that section of content.Glad you found a solution π
November 25, 2019 at 4:34 pm #1077140IzzyOooooh I see. That makes sense. Thank you Leo!
November 25, 2019 at 5:31 pm #1077187LeoStaffCustomer SupportNo problem π
-
AuthorPosts
- You must be logged in to reply to this topic.