Icon to top bar and make top bar visible always

Support
#1

Hello.

I need to add a phone icon before the phone number and a WhatsApp icon before the WhatsApp number to the top bar. Also, I’d like to make that top bar “visible” at all times as people scroll down the different site pages… the same way that the nav bar (where logo and menu are) is visible at all times as one scrolls down. Please see attached SS.

Thanks for the help!

#2

Hi Jacko,

Thank you for writing in, please add the bits of code below before your WhatsApp number.

<i class="x-icon x-icon-phone" data-x-icon-s="&#xf095;" aria-hidden="true"></i>
<i class="x-icon x-icon-whatsapp" data-x-icon-b="&#xf232;" aria-hidden="true"></i>

Regarding the fixed topbar, please follow the solution provided here.

Hope it helps,
Cheers!

#3

Thank you very much Friech.

I added the code to include the icons for WhatsApp and phone on the top bar…the phone shows up in “bold” but not the WhatsApp, how can I make them both appear en bold?

I will follow the solution you provided to make the topbar fixed and I’ll get back with you. Thanks!

#4

Hi again,

To make it bold, please add the following code in the Theme Options > CSS:

.x-icon-whatsapp {
    font-weight: bold;
}

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

#5

Worked great!.. so did the option to make the topbar fixed. Thank you very much for your help!

#6

You’re most welcome, Jacko!

#7

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

#8
#9

Hello again… I trust you’re doing well.

I need to reopen this at the “fixed topbar” is not visible on mobile (just noticed this a couple of days ago)… works great on desktop but not on mobile devices. Can you please help with this.

Best regards!

#10

Hi,

To make your topbar fixed in mobile, you can add the code below in Theme Options > CSS

@media (max-width: 979px) {
     .x-topbar {
         height: 137px;
     }
    .x-topbar .x-topbar-inner {
          background: #fff;
    position: fixed;
    width: 100%;
    top: 0;
    }
}

Hope this helps

#11

Thank you very much, it worked great!

#12

You’re welcome, Jacko.