Clickable email and telephone number above header

Site URL: https://www.stellarlighting.co.uk/

Hello,

The code I used on my 7.0 website to display a clickable version of the email and telephone doesn't work on my 7.1 site. The email and telephone number dispalys, however they're not clickable and in mobile view, the email address overlaps the logo.

Can anyone help me advise what needs changing in the code or what alternative code I could use?

Thank you,

Janos

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div style="text-align: left; font-size:75%; color:white; background: rgb(6,2,13); padding-left:2em;  height: 3em; ">
         <i class="fa fa-phone" aria-hidden="true"></i>
  <p style="display: inline-block" >
  
  <a href="tel:+447411116473‬" >0741 111 6473</a>
  
  
  </p> &emsp;
              <i class="fa fa-envelope" aria-hidden="true"></i>
       <p style="display: inline-block" >
         
         <a href="mailto:info@stellarlighting.co.uk" >info@stellarlighting.co.uk</a>
    
</div>

Header overlap your email/phone bar, so you can't click it.

Add this to Design > Custom CSS

header#header {
    top: 40px;
}

5 hours ago, tuanphan said:

Header overlap your email/phone bar, so you can't click it.

Add this to Design > Custom CSS

header#header {
    top: 40px;
}

 

This does the trick, thank you tuanphan! Though doesn't work with the sticky header menu. In the 7.0 version I did not have sticky header menu so didn't notice this behaviour, but with the sticky header, when I scroll down, there's menu stays but the row with the email and telephone number scrolls away.
Is the only way to resolve this is to get rid of the sticky header menu?

46 minutes ago, hampi said:

This does the trick, thank you tuanphan! Though doesn't work with the sticky header menu. In the 7.0 version I did not have sticky header menu so didn't notice this behaviour, but with the sticky header, when I scroll down, there's menu stays but the row with the email and telephone number scrolls away.
Is the only way to resolve this is to get rid of the sticky header menu?

You want to make email/phone bar sticky on scroll?

4 hours ago, tuanphan said:

You want to make email/phone bar sticky on scroll?

If that's possible to achive in a relatively simple way, then yes.

On 5/19/2021 at 6:03 PM, hampi said:

If that's possible to achive in a relatively simple way, then yes.

You need to edit above code a bit, then we can use script code to make it sticky.

First, edit this line

<div style="text-align: left; font-size:75%; color:white; background: rgb(6,2,13); padding-left:2em;  height: 3em; ">

to this

<div class="ttopbar" style="text-align:left;font-size:75%;color:white;background:rgb(6,2,13);padding-left:2em;height: 3em;">

5 hours ago, tuanphan said:

You need to edit above code a bit, then we can use script code to make it sticky.

First, edit this line

<div style="text-align: left; font-size:75%; color:white; background: rgb(6,2,13); padding-left:2em;  height: 3em; ">

to this

<div class="ttopbar" style="text-align:left;font-size:75%;color:white;background:rgb(6,2,13);padding-left:2em;height: 3em;">

 

Unfortunately I coulnd't make the email and telephone line sticky. Found the code and changed it, but nothing happened. 
I'll settle for the non-sticky version, you already helped me with that, so thank you 🙂

That's just the first step. As I said above, you need to edit the code, then I can test the sticky code.

Quote

You need to edit above code a bit, then we can use script code to make it sticky.

If you don't edit like above, I will need a lot of time to test (and I am overloaded right now, I won't be able to help with this)