Solved SP Page Builder

Adding module to helix ultimate topbar

Asked by Jesper 1 year ago Last activity 1 year ago

Hi, How can I add and module to the helix ultimate topbar position.
In the template settings, it is easy to setup phone and email, because there is a pre-defined functions. But if I wand to add and field with an address. how do I do that.
I have tried with a module on the position, but it does not show.
thanks

Accepted answer

Marked as the solution

Paul Frankowski Senior Staff

1 year ago · edited

You have to override class name using Icon ID from Font Awesome website.

.sp-contact-phone > span.fa-phone::before { content: "\f3c5"; }

10 more replies

Atick Eashrak Shuvo Staff

1 year ago

Hi there!

Thank you for bringing this to our attention, and I sincerely apologize for the inconvenience caused.

To assist you more effectively, may I kindly request temporary administrative access to your site? This will allow me to thoroughly investigate and resolve the issue for you.

Before sharing the credentials, I strongly recommend taking a complete backup of your site to ensure all data remains secure.

Looking forward to your response.

Best regards

Paul Frankowski Senior Staff

1 year ago

Hi Jesper ,

to make it work you have two options:

Create a Custom Header with custom Top-Bar (quite easy)
Add that change manually inside header file (harder?)

We have info in Helix documenation > https://www.joomshaper.com/documentation/helix-framework/custom-header

Paul Frankowski Senior Staff

1 year ago

But that's what I'm thinking, after all, you have the ‘Opening hours’ field in Template Options > Basic > Contact Info, type the address in there and just replace the icon from clock to different one or hide it using a single line of Custom CSS:

.sp-contact-time > span.fa-clock {display: none;}

Jesper Asked this

1 year ago

Hi Paul
I do not know what happened, I had it all in place. but now it is not working.
I have this in my custom.css.

.fa-clock:before, .fa-clock-four:before {
content: "\f3c5";
}

but it will not change the "opening hours" icon.

I believe it worked, but now it don't

Hope you will help.,

Jesper Asked this

1 year ago

Hi Paul. thats a great solution. I want to use the contact info. "Phone" instead, since it is not faced.
Would you be able to help with the way to replace the phone icon.

".sp-contact-phone > span.fa-phone {display: none;}" works but how do I insert a new icon.
If I find the file and change it will propable be changed back with the next template update.
Can I do something in css?

Jesper Asked this

1 year ago

Thanks Paul
It worked brilliantly. and thanks for directing me to the content code from fontawesome.
much appreciated and again thanks for your good support.

Paul Frankowski Senior Staff

1 year ago

Share URL, I will look.

Maybe problem is with font-weight or ?? or you disabled Font Awesome.

Yes, we all know that it worked.

Jesper Asked this

1 year ago

Hi Paul
find URL in hidden section

Paul Frankowski Senior Staff

1 year ago · edited

You will probably laugh at this, but you forgot that you have two separate templates. And you only gave the CSS code in one custom.css file , not in both. Besides you forgot about " ". And small mistake with double "}". In total 3 mistakes.

You had to be very tired ;]

yes, fixed.

Jesper Asked this

1 year ago

Hi Paul
Yes! what a night. But thanks for the time supporting me. ;-)

Paul Frankowski Senior Staff

1 year ago

Next time, you own me pizza for CSI investigation.

Have a nice day.

Jesper Asked this

1 year ago

just tell me when and where to order. The CSI I leave to you. 😀