Header Extra Elements Phone Number Links

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.

And you did not test mine ?
OK –

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>

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 years, 1 month ago by Guenni007.