Make text in header clickable

[RichieP]

Hi there

I need to make the phone number and email address clickable, rather than part of the image.

Is there a way to overlay text on the header or add a sort of transparent text box?

http://www.claregatedental.co.uk/

Thanks
Richie

[scrambler]

There are many different ways to do that, the issue is what will be the responsive behavior, which means what happens when the browser becomes smaller.

By using a global image, the whole image scales down with the browser.

If you use text for the phone and email, they wont be able to scale down, so you will need to make them smaller or else they will end up over the logo on the left.

Given what you have right now, I would start by trying to use the Header widget area. Define two widgets in there (Main options > Header > Header widget area)  with width percentages of 40% and 60%.

Then go in appearance > Widgets, drop two text widgets in the header widget area, place the HTML of the logo image only in the fisrt one, and put your phone number and email as links in the second one.

Then we can fine tune what happens on mobile.

If you really wanted to keep the phone number and email that big, you could eventually make one image for each, and insert these two images in the second text widget as links. To allow the images to scale, you would add a max-width:100% in a style attribute of the image tag

<a href=”linkurl”><img style=”max-width:100%;” src=”phone-imageurl” /></a>

<a href=”linkurl”><img style=”max-width:100%;” src=”email-imageurl” /></a>

[RichieP]

Thanks for your quick reply.

I thought it might be using the widgets. I’ve made some progress but don’t know how to increase the size of the text, make it white and have them on different lines.

Richie

[scrambler]

you can style text with inline CSS and create a line break with <br/> like below

<span style=”font-size:150%;”>Tel: 01902 754525</span><br/>
<span style=”font-size:150%;”>Email:[email protected]</span>

If you are not familiar with basic html, you can use the content editor of a test page to do your formatting, then switch the content editor to text mode and copy the HTML from there

[RichieP]

Thanks. Much better now.

The phone number kept coming out larger for some reason so I’ve set the font size in the Header options.

Is there a way to change the font to white?

Thanks

[scrambler]

Add any extra styling to the style attribute of the text

<span style=”color:white;font-size:120%;”>Tel: 01902 754525</span><br/>
<span style=”color:white;font-size:150%;”>Email:[email protected]</span>

[RichieP]

It displays white when I copy and paste your code, but when I add the a href to make the text clickable it goes back to blue.

[scrambler]

Yes, because links are styled differently.

To style the link colors differently in the header widget area, use the rules below placed in Advanced Options > Head section > Custom CSS Rule box

#sidebar_header a {color:white;}
#sidebar_header a:hover {color:red;}

[RichieP]

Excellent. Thanks for your help.

Richie

[RichieP]

Hi there

Sorry to be a pain but I don’t want to start a new thread as this relates to the same thing.

I’ve made the font in the header large so it fills most of the space. However, this doesn’t scale down for a mobile device. The text flows onto the next line on my phone and the whole header area looks huge.

How can I get the text to scale down the same way an image does?

thanks
Richie

[scrambler]

If you read my initial post, I warned you that you cannot have the text scale, it is just not possible with CSS.

You only have two solutions.

Put a class on the links and use an @media rule to change the text size under a certain width. The text will be one size above a certain browser width, and another size under that, no progressive scaling

Or create one image for the phone number and one image for the email, like I explained in my first answer, and these will scale with the browser

[RichieP]

Thanks for your reply.

I realise you said that now. Going back to images again puts it back to the original issue. How can I apply the @media rule to the text in the header?

Thnaks
Richie

[scrambler]

“Going back to images again puts it back to the original issue”

No, you did not understand what I meant, you would not create one large header image, but two small images one with the Phone number, and one with the email. These two images would be in the same place you have the text right now in the right widgets, and they could scale with the widget.

to use an @ media rule to change the text size you would do the following.

Add a class to the span that has the font-size style, and remove the inline style.

<span class=”mytext“>
<a href….>Email</a>
<a href….>phone</a>
</span>

Then you would place the rules below in Advanced Options > Head Section > Custom CSS Rule box.

.mytext {font-size:300%;}
@media only screen and (max-width:640px) {
.mytext {font-size:200%;}
}

using the value you want for the width threshold and the size

[RichieP]

Sorry for delayed reply. I’ve not had the chance to revisit this.

I probably didn’t word the reply very well – “Going back to images again puts it back to the original issue”

I understand about making smaller images, but will these work as clickable links to the email or phone number?

Thanks
Richie

[scrambler]

you can make an image a link. see base principle below

<a href=”link“> <img style=”max-width:100%;” src=”imageurl ” /> </a>

[Author]

Posts