[Resolved] HTML a tag and tel: links

Home Forums Support HTML a tag and tel: links

  • This topic has 8 replies, 2 voices, and was last updated 10 months ago by Leo.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1076879
    Izzy

    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.

    #1076885
    Izzy

    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.

    #1076915
    Leo
    Staff
    Customer Support

    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.

    #1076940
    Izzy

    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.

    #1076956
    Leo
    Staff
    Customer Support

    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 🙂

    #1076996
    Izzy

    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.

    #1077126
    Leo
    Staff
    Customer Support

    The merged header isn’t restricting the <a> tag, it’s simply covering that section of content.

    Glad you found a solution 🙂

    #1077140
    Izzy

    Oooooh I see. That makes sense. Thank you Leo!

    #1077187
    Leo
    Staff
    Customer Support
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.