Docs

[newskywebsites]

Hi there, I’m working on this site: http://c84.f15.myftpupload.com and I’d like the top bar to have all the content right aligned in white text with a #f1f1f1 hover effect on the links. This includes the Facebook icon. The Facebook icon is there presently, but invisible, because it’s teal on a teal background.

So far I have this CSS code in place:

.x-topbar .p-info a {
border-bottom: 0;
}

.x-topbar {
background-color: #359183;
margin: 0px;
}

.x-topbar {
text-color: #ffffff;
margin: 0px;
}

And here is my top bar code:

<span style=”color:#ffffff;”>CALL </span><span style=”color:#ffffff;”>262.993.5336</span>

<span style=”color:#ffffff;”> | </span><span style=”color:#ffffff;”>EMAIL</span></span>

Can you please give me detailed instructions? I’m using WP 4.4.2 and parent X theme 4.4.1. Cornerstone 1.2.3.

Thanks!
Dawn

[Darshana]

Hi there,

Thanks for writing in! You can add this under Custom > CSS in the Customizer and change the color values accordingly.

.x-topbar .p-info {
    float: right;
}

.x-topbar .x-social-global a {
    color: #ffffff;
}

.x-topbar .x-social-global a:hover {
    color: #336699;
}

Hope that helps.

[newskywebsites]

This worked perfect for the colors! Thanks so much! But is there a way to put the facebook icon on the right of the text instead of on the left? http://c84.f15.myftpupload.com/

Thanks!!
Dawn

[Friech]

Hi Dawn,

You can add this under Custom > Global JavaScript in the Customizer.

jQuery( document ).ready(function() {
  jQuery(".x-topbar .x-social-global").insertBefore(".x-topbar .p-info");
});

Hope it helps, Cheers!

[newskywebsites]

Perfecto! Thanks so much!!
Dawn

[Paul R]

You’re welcome! 🙂

[newskywebsites]

The code you gave me works really nice on the desktop version of the site, but it bumps to two lines from smaller screen sizes and mobile. (facebook icon is on it’s own line). See screenshot. Is there a fix for this?

Thanks!
Dawn

[newskywebsites]

sorry, file was too big. here is screenshot…

[Friech]

Hi There,

Yeah, sorry to overlook that. Your screenshot is too small 🙂
You can add this under Custom > CSS in the Customizer.

@media (max-width:  767px) {
	.x-topbar .x-social-global {float: right;}
}

Hope it helps, Cheers!

[newskywebsites]

Thank you, but that didn’t work for mobile. See attached screenshot. Now there is a border around the text and the social media logo is bumped slightly down. I’m sending my login privately in case that can speed this along. Thanks!!

[newskywebsites]

This reply has been marked as private.

[Christopher]

Hi there,

Please add this as well :

@media (max-width: 767px){
.x-topbar .p-info {
    border: none;
}
}

Hope it helps.

[newskywebsites]

Thank you. That removed the border, but the alignment is still not even. As seen in the previous screenshot, the text is higher than the icon…

Thanks!
Dawn

[Rupok]

Hi Dawn,

Thanks for writing back. Sorry we missed that somehow. Kindly update the suggested code to following :

@media (max-width: 767px){
.x-topbar .p-info {
    border: none;
}

.x-topbar .x-social-global a {
  margin-top: -5px;
}
}

Hope this helps.

Cheers!

[newskywebsites]

That works! Thanks!

[Author]

Posts