Top Bar Coding Question

[AlexMcNeice]

Hi guys. Thank you, as always for your help.

I have enable a topbar to have a phone number and email address included on the top of the site. I would like the email address on the left and the phone number on the right.

I have followed a previous thread that got me pretty far, apart from the two are superimposed on each other on the right hand side. Could you suggest the coding to have one on each side?

CURRENTLY - in Custom CSS in Customiser

.x-topbar .x-social-global {
display: none;
}

.x-topbar .p-info a {
color: #fff !important;
font-size: 16px;
position:absolute;
right: 20px;
text-align:right;
color:blue;
}

.x-topbar .p-info a>span {
font-size:25px;
color:white;
}

.x-topbar {
background: rgb(34, 34, 34) !important;
}

@media screen and (max-width: 767px) {
.x-topbar .p-info a {
font-size: 20px !important;
position: relative !important;
right: auto !important;
float: right;
margin-bottom: 15px;
}
}

@media screen and (max-width: 480px) {
.x-topbar .p-info a {
font-size: 17px !important;
}
}

AND IN TOPBAR CONTENT

Call Us
07810 323256

Email US
[email protected]

Thank you for your advice thus far on everything, and hopefully for pointing me in the right direction here!

Alex.

[basanta]

Hi There,

Thanks for writing in!

Please find the updated CSS here.

.x-topbar .x-social-global {
display: none;
}
.x-topbar .p-info {
width: 100%
}
.x-topbar .p-info a {
color: #fff !important;
font-size: 16px;
right: 20px;
}
.x-topbar .p-info a:first-child{
float: right;
}
.x-topbar .p-info a:last-child{
float: left;
}
.x-topbar .p-info a>span {
font-size:25px;
color:white;
}

.x-topbar {
background: rgb(34, 34, 34) !important;
}

@media screen and (max-width: 767px) {
.x-topbar .p-info a {
font-size: 20px !important;
position: relative !important;
right: auto !important;
float: right;
margin-bottom: 15px;
}
}

@media screen and (max-width: 480px) {
.x-topbar .p-info a {
font-size: 17px !important;
}
}

Hope this is something you are looking for.

Thanks

[AlexMcNeice]

Wonderful, thank you as ever!

[basanta]

Glad to know!

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.