How Do I List My Phone Number At the Top of the Homepage

I would like to display my phone number at the top of the home page directly below the social media icons and across from the logo. I currently have the phone number in the H1 of the homepage and would like to keep the same font and size as in the H1.

My site URL is http://comfortclimateservice.com

Thank you for your help.

 

Hello,

Go to the header.php file present in your theme directory and paste the code given below in that file.

Code:

<div class="phone_number">
      <h1>Phone Number: 0000000000 </h1>
</div>

Inplace of "Phone Number: 0000000000" you can put your contact details.

See the image given below for the reference.



Now,
Paste this code in Custom CSS
Appearance > Theme Option > Styling Option > Custom CSS

Code:

.phone_number h1 {
text-align: right;
padding-right: 10px;
font-size: 24px;
font-family: Georgia;
}

This will solve your issue.

 

The phone number is appearing in the right corner opposite of the logo.

What would the code be if I want the phone number to be regular text and not an H1?
How do I keep the menu items from moving down or moving down less on the page?
I want to center the phone number underneath the social icons. Is it best to text-align right and then adjust the padding? Or make the margin-left:425px?
What is the best way to center the phone number in mobile or other applications with the responsive portion?

 

For this issue,
Go to the header.php file present in your theme directory and paste the code given below instead of the above given code, in that file.

Code:

<div class="phone_number">
      <p>Phone Number: 0000000000 </p>
</div>

Inplace of "Phone Number: 0000000000" you can put your contact details.

Now,
Paste this code in Custom CSS
Appearance > Theme Option > Styling Option > Custom CSS

Code:

.phone_number p {
text-align: right;
padding-right: 10px;
font-size: 24px;
font-family: Georgia;
}

Could you please explain this issue with the help of screenshot images that at which area you want the changes.

For this issue paste the code given below in Custom CSS
Appearance > Theme Option > Styling Option > Custom CSS

Code:

@media only screen and (max-width: 480px){
.phone_number p {
text-align: center;
margin-left: 50px;
}
}
@media only screen and (max-width: 767px) and (min-width: 480px){
.phone_number p {
text-align: center;
margin-left: 50px;
}
}

You can adjust the value of margin-left as per your requirement.
This will solve your issue.

 

How do I keep the menu items from moving down or moving down less on the page?

Attached is a screenshot of the menu. When I added the phone number, the menu items moved down the page quite a bit as shown in the screenshot. How can I decrease the space between the phone number and the menu items?

 

Hello,

Paste this code in Custom CSS
Appearance > Theme Option > Styling Option > Custom CSS

Code:

.phone_number p{
margin-bottom:-20px;
}
 
@media only screen and (max-width: 960px) and (min-width: 767px){
.phone_number p{
margin-bottom: 0px;
}
 
}
@media only screen and (max-width: 767px) and (min-width: 480px){
.phone_number p{
margin-bottom: 0px;
}
 
}
 
 
@media only screen and (max-width: 480px){
.phone_number p{
margin-bottom: 0px;
}
 
}

 

Works great. Thank you very much for your support.