Docs

[poyser7]

Hi there and Happy New Year!

URL: http://newbodyosteo.staging.wpengine.com/wp-admin/
Wordpress version: 4.6.1
X version: Child Theme (Integrity)
Cornerstone: 1.3.3

Ive attached a screen grab of the top bar in the my website.

I would like to make the phone number on the right hand side of the Social media icons, sit on the left hand side of the social media icons.

The number will then be clickable to make a call when in Mobile view.

Is there any way you can look and provide me with some code I can copy and paste please?

Im using Cornerstone to edit the majority of the site.

Many thanks

Jay

[poyser7]

This reply has been marked as private.

[Rupok]

Hi Jay,

Thanks for writing in and happy new year! You can add this under Custom > CSS in the Customizer.

body .x-topbar .p-info {
  float: left;
  margin-left: 70%;
}

If you want to make it clickable, you should use within anchor tag :

<a href="tel:0207-177-0207">0207-177-0207</a>

Hope this helps.

[poyser7]

Thank you Rupok!

I’ll try this when I can get out of the office. 🙂

[Prasant Rai]

You are most welcome. Let us know how it goes. 🙂

[poyser7]

Hi there, this such a good solution, only problem is, its not close enough to the icons. It also goes on to multiple lines when in mobile view and floats to the left. See attachments.

Is there a way to make it sit closer to icons so the gap between the number and the Facebook icon is the same size as the gap between all 3 icons?
Also, keeping the phone number on 1 line, centre aligned above the icons when in mobile view?

Many thanks for your help.

[poyser7]

Hi there, this such a good solution, only problem is, its not close enough to the icons. It also goes on to multiple lines when in mobile view and floats to the left. See attachments.

Is there a way to make it sit closer to icons so the gap between the number and the Facebook icon is the same size as the gap between all 3 icons?
Also, keeping the phone number on 1 line, centre aligned above the icons when in mobile view?
There is also a thin line under the phone number. Do you know how to remove this please?

This is a lot to ask but really appreciate it.
Many thanks for your help.

[Friech]

Hi There,

Please remove the suggested custom CSS above, and add this instead.

@media (min-width:  768px) {
.x-topbar .p-info {
	float: right;
    margin-left: 7px;
    margin-top: 17px;
}
}
body .x-topbar .p-info {background-color: #fff;padding-bottom: 0;}
body .x-topbar .p-info a {
	border-bottom: none;
    border-radius: 10px;
    background-color: #33cccc;
    color: #fff;
    padding: 5px;
}
.x-topbar .p-info a:hover {
	    background-color: #157f90;
}

Hope it helps, Cheers!

[Author]

Posts