Change items in topbar

Support
#1

I would like to change the font color and size of the phone number and email on my topbar to black and also move them over to the right next to the social media items. Actually, would like to link my email contact form up there instead of a direct email link. Please tell me how to do that. Thank you!

#2

Hi Siu Ping Negrin,

Thanks for writing in.

To change the font color and size of the phone number and email, just add this custom css.


#top .x-topbar .p-info a, #top .x-topbar .p-info {
    color: red;
    font-size: 12px;
}

You can change the color and font-size as you wish.

To move the text next to the social media items, add this custom css.

#top .x-topbar .p-info {
    float: right;
    margin-left: 20px;
}

You can change the link of the header text by going to the wordpress admin dashboard then goto x > theme options > header > top bar. Here’s a screenshot of it.

Hope it helps.

#3

How do I move the text to left of the social media items, instead of all the way to the right? And also how do I change the color of the social media icons? Thank you.

#4

Hi @spnegrin,

Would you mind sharing a link to your site at this point? We’d like to help you with this, but if you’re already applying customizations it would help us be more certain that our solution works for you if we can test the CSS on your site first. Thanks!

#5

Hi, I did apply the changes you mentioned and they worked great. Just need help with the social media icons.
Here’s my site
www.siupinghealing.com

#6

Hi @spnegrin,

To do that, please go to the Global CSS then get rid of these CSS block:

#top .x-topbar .p-info {
    float: right;
    margin-left: 20px;
}

Hope this helps.

#7

What I am trying to do is move the social media icons all the way to the right and then my contact info just to the left of it instead of all the way to the left. Also, I would like to change the media icon color. Please advise.

#8

Hi Siu Ping Negrin,

In that case, still get rid of the block of code mentioned previously then add this code in the Global CSS:

.x-topbar-inner {
    display: flex;
    justify-content: flex-end;
}

Then to change the color of the social icons, please add this code:

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

Feel free to change the color in the code above.

Hope this helps.

1 Like
#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.