Top Bar Content

Support
#1

Hi! I would like to make the topbar content font larger and to also change the color of just the phone number that I am placing uptop. How do I achieve that ?

Tks.

#2

Hi There,

Please try adding the following CSS under Customizer > Custom > Global CSS:

.x-topbar .p-info {
    font-size: 17px;
}
.x-topbar .p-info a[href^="tel"] {
    color: #000
}

Let us know how it goes!

#3

I had this code already posted in my CSS , the problem is that I only want to change the size and Color of the phone number so that it is bigger than the rest of the wording. Also, when I make it bigger it then moves all of my social icons out of alignment.

#4

Hello @borinqen,

In that case can you please share website URL for us to take a closer look?

Thanks.

#5

i have just added a secured note to my previous response. Tks!

#6

Hi there,

Please wrap the phone number in the topbar content in a span tag and add a class to it like this:

<span class="phone">877.227.3890</span>

And add this code in the custom CSS:

.x-topbar .p-info .phone {
    color: #ccc;
    font-size: 25px;
}

Hope this helps.

#7

Thank you! This worked, however, it then moves my social bottoms towards the bottom. They are no longer centered. How can I keep them in the same line in the top bar?

#8

Hi There,

Please also add this custom CSS:

.x-topbar-inner.x-container.max.width {
    width: 92%;
    max-width: 100%;
}

Let us know how it goes!

#9

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