How to Add a Phone Number in Top Right Corner

Dear All,

What do I need to edit to be able to add a phone number in the top right corner of each page, above the top menu links?

Thanks!

 

Hello,
Go to the header.php file (Theme directory -> header.php) present in your dashboard and paste the code given below in that file as shown in the given image.

Code:

<p class="phone_no">Enter your contact number here.</p>

See the image for the reference,
Now,
Paste the following code in your Custom CSS to style that phone number section.
(Appearance -> Theme Options -> Styling Options -> Custom CSS)

Code:

.phone_no {
Float: right;
margin: 15px 25px;
color: black;
font-size: 15px;
}

This will solve your issue.

 

Thank you Piyush. Unfortunately, that only partially solved my issue. The phone number is now showing, but it is not fixed on the top right of the menu. Rather it is positioned in the top right of the page, meaning the phone number is floating on the top right side of the background. I have attached the precise fixed positioning of the phone that I need. So no matter what the resolution of the monitor, the phone number would show in the same location. Please see attached. I look forward to your reply.

 

Hello,
Go to the header.php file (Theme directory -> header.php) present in your dashboard and paste the code given below in that file as shown in the given image and delete the previous code provide by us in the previous reply.

Code:

<p class="phone_no">Enter your contact number here.</p>

See the image for the reference,


Now,
Paste the following code in your Custom CSS to style that phone number section.
(Appearance -> Theme Options -> Styling Options -> Custom CSS)

Code:

.phone_no {
float: right;
color: black;
font-size: 15px;
}

This will solve your issue.

 

Thanks Piyush, but once again that did not work. You removed the margins, but it is still placing the phone number in the top right corner of the page, NOT the top right corner of the menu. The desired behavior is to display the phone number in the top right corner of the menu (not the top right corner of the page). Please see the image I had posted with my previous post. Please provide a fix for this. Thanks in advance.

 

Hello,

Can you please explain your problem with the help of screenshot, where you want to display your contact details and also share the link of your website.

 

Hi Gourav, the attachment was posted above. Here is the link: http://www.inkthemes.com/community/attachments/example2-png.1130/ I want the phone number to remain *FIXED* where the 1-800-555-1212 appears in the screenshot.

 

Hello,

It is not possible to add contact info at the top right corner of menu and the image you have sent is showing contact info at the top right corner of the page and for that solution is already provided above.

 

The attached image clearly has the phone number at the top right corner of the menu, not the page. First you missed the entire image, then you missed where the phone number is on the image. What a complete waste of my time. I won't be recommending Inkthemes any longer.

 

Hello,

I would appreciate if you keep some patience and again please check the image you sent to us earlier. According to that image we provided you the solution. Please cooperate. If you think you are still unable to implement the solution then please send us the following details.

Thread Link:
Your Website URL:
WordPress Username:
WordPress Password:

Send this information on our email at [email protected]
We will try to fix your issue.

 

You must not even be glancing at the image. As clearly shown in the image, the phone number of "1-800-555-1212" is FIXED at the top right corner of the MENU, (NOT the top right corner of the page). The menu ends at the "Contact" link, and so does the last "2" in the phone number.

The solution that was provided, was NOT at all the solution to the numerous questions asked in this thread, and clearly demonstrated in the image.

The basic CSS provided in the solution is causing the phone number to get placed in the top right corner of the PAGE . It's not static. Based on your monitor's resolution the phone number is moving all over the place. On a small screen, the phone number is moving to the middle of the page. On a large screen, the solution is causing the phone number to move to the right corner of the PAGE over the background image.

Here is the thread link:
http://www.inkthemes.com/community/threads/how-to-add-a-phone-number-in-top-right-corner.4474/

Here is the image that clearly shows the solution requested, which was not provided thus far (phone number must stay static on the top right corner of the menu, not the page):
http://www.inkthemes.com/community/attachments/example2-png.1130/

Yes, both of the above are in this thread, but for some strange reason you asked, so there you are.

You certainly do not need any other information, particularly the login credentials my WordPress site. I strongly recommend others reading this thread, that they do NOT provide their login credentials to anyone in this forum. The support personnel should know how to help you without actually logging into your site.

If you do not want to spend time actually studying the image or a willingness to understand what is being requested, I would recommend seeking help from someone else, and providing the answer in this thread, for all to benefit.

I would like to think waiting since May 10, 2013 (over a month) demonstrates my patience.

 

Hello,

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

Code:

@media only screen and (min-width: 768px) and (max-width: 960px) {
.phone_no {
float:right!important;
margin-right:10px;
}
}
 
@media only screen and (max-width: 767px) {
.phone_no {
float:right!important;
margin-right:10px;
}
}
@media only screen and (max-width: 480px) {
.phone_no {
float:right!important;
margin-right:-20px;
}
}

Adjust its value as per your requirements.

 

I know this is late, but I wanted to update those that are interested on how I actually got this to work.

1. On your header.php file immediately under <div class="header"> copy and paste this:

<p class="cell">
Call 1-877-555-1212

2. Under Style Options > Custom CSS, add this code:

.cell {
text-align: right;
}

The problem of having a phone number in the top right immediately above the menu, solved.

HTH