Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • #1321815

    Hi,

    I’m trying to make the phone number and email clickable in the area above the header. I have inserted this code into the area but it is not working.

    [av_font_icon icon='ue854' font='entypo-fontello' style='' caption='' link='' linktarget='' size='20px' position='left' color=''][/av_font_icon] <span class="custom-header-meta"><a href=“tel:3109333123">(310)933 3123</a></span> [av_font_icon icon='ue805' font='entypo-fontello' style='' caption='' link='' linktarget='' size='20px' position='left' color=''][/av_font_icon] <span class="custom-header-meta"><a href="mailto: (Email address hidden if logged out) "> (Email address hidden if logged out) </a></span>

    Any Assistance would be helpful

    #1322009

    Hey Stretchspot,

    Thank you for the inquiry.

    Have you tried wrapping the icon shortcode and the content inside a link tag?

    Example:

    <a href="http://link-to-somewhere.com">Some content here</a>
    

    -or-

    <a href="http://link-to-somewhere.com">[av_font_icon icon='ue854' font='entypo-fontello' style='' caption='' link='' linktarget='' size='20px' position='left' color=''][/av_font_icon] <span class="custom-header-meta"><a href=“tel:3109333123">(310)933 3123</a></span> [av_font_icon icon='ue805' font='entypo-fontello' style='' caption='' link='' linktarget='' size='20px' position='left' color=''][/av_font_icon] <span class="custom-header-meta"><a href="mailto: (Email address hidden if logged out)  "> (Email address hidden if logged out) </a></span></a>
    

    Best regards,
    Ismael

    #1322051

    yes you can do it this way too – if you like to have the icons inside the link ( click-active) :

    <a href="tel:3109333123">[av_font_icon icon='ue854' font='entypo-fontello' size='20px' position='left' color='#b02b2c' ][/av_font_icon] (310)933 3123</a> - <a href="mailto: (Email address hidden if logged out) ">[av_font_icon icon='ue805' font='entypo-fontello'  size='20px' position='left' color='#b02b2c' ][/av_font_icon]  (Email address hidden if logged out) </a>
    

    important to have the icons besides the concerning link : display: inline-block ( or -table )

    .phone-info a {
      display: inline-block
    }

    change the color to whatever you like.

    #1322068
    #1322072

    And you did not test mine ?
    OK –

    #1322226

    @guenni007 I was having trouble understanding your suggestion. Did you want me to just add the phone-info? I would like the icons to the left of the link.

    #1322331

    I’m trying to make the phone number and email clickable in the area above the header

    so i guess it is the area of the header_meta.
    You can insert content to that area by using the phone-info field. As far i can see – you have done this.

    Add that little css to your quick css. – just give it a try
    Copy & Paste this code to your phone-info input field ( replace the other entries )

    <a href="tel:3109333123">[av_font_icon icon='ue854' font='entypo-fontello' size='20px' position='left' color='#b02b2c' ][/av_font_icon] (310)933 3123</a> • <a href="mailto: (Email address hidden if logged out) ">[av_font_icon icon='ue805' font='entypo-fontello' size='20px' position='left' color='#b02b2c' ][/av_font_icon]  (Email address hidden if logged out) </a>
    
    #1322400

    Hi,

    Thank you for the update.

    You may need to add the css code that @guenni007 suggested above to fix the link alignment. Please toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the code.

    .phone-info a {
      display: inline-block
    }
    

    Best regards,
    Ismael

    #1322529

    Ok, I added the css. It is now on one line but the phone number is not on the same horizontal line – It is slightly dropped.

    #1322539

    and you realy replaced your code ( on phone-info input field ) with mine ???

    <a href="tel:3109333123">[av_font_icon icon='ue854' font='entypo-fontello' size='20px' position='left' color='#b02b2c' ][/av_font_icon] (310)933 3123</a> - <a href="mailto: (Email address hidden if logged out) ">[av_font_icon icon='ue805' font='entypo-fontello' size='20px' position='left' color='#b02b2c' ][/av_font_icon]  (Email address hidden if logged out) </a>
    
    #1322574

    Hi,

    Yes, please try use @guenni007‘s solution instead of the previous code that we suggested.

    Best regards,
    Ismael

    #1322677

    I went ahead and replaced my code with @guenni007‘s solution but things looks a tad more off.

    Please advise

    #1322678

    now put this to your quick css:
    the first rule is extended – then the second instruction is added

    .phone-info a {
    	display: inline-block;
    	font-size: 14px;
    	font-weight: normal !important;
    	padding-left: 15px
    }
    
    .phone-info .av_font_icon {
    	position: relative;
    	top: -4px;
    	color: #eaac57;
    }

    and in the phone-info code get rid of separator “-”
    or replace with:

    <a href="tel:3109333123">[av_font_icon icon='ue854' font='entypo-fontello' size='20px' position='left' color='#eaac57' custom_class='phone'][/av_font_icon] (310)933 3123</a><a href="mailto: (Email address hidden if logged out) ">[av_font_icon icon='ue805' font='entypo-fontello' size='20px' position='left' color='#eaac57' custom_class='email'][/av_font_icon]  (Email address hidden if logged out) </a>
    
    • This reply was modified 3 weeks, 5 days ago by  Guenni007.
    #1322876

    btw. if you like to have that phone icon mirrored:

    .av_font_icon.phone {
      transform: scaleX(-1) !important;
    }
    #1322951

    Hi,

    Thanks for helping out @guenni007 :-)

    Best regards,
    Rikard

    #1323724

    complaining is always immediate, positive feedback takes longer – why was that? ;)

Viewing 16 posts - 1 through 16 (of 16 total)

You must be logged in to reply to this topic.