how to use the ICON BOX feature

[codeware]

Hello,

On the ICON BOX feature, is it possible to have each icon with a different color?
Please check the page link to see 2 lines of 3 icon boxes each. The svg icons were created in the same color that I used for the box title. So the first box – MANIPULAÇÃO DE FORMULAS – is a black icon with black title.

But it doesn´t matter the settings that I put for each icon they all get the color that I set for the last icon box (weird??!!)

So is it possible to have them in different colors or do I need to use the icon box in just one color?

Please let me know. Thanks!

[David Martin – Support]

You set this in the Swift Page Builder.

[codeware]

yes, that what I did… but I had to leave the icon colors as icon_color=”#fff” icon_bg_color=”#fff. Please check the attachment to see how the first icon shows if I change those settings to #333 (which is the same color of the text)

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Hi

It’s because that one is a line icon, add this to your custom css:

.sf-icon-box .sf-svg-icon-holder.has-color path {
fill: none;
}

– Kyle

[codeware]

1 – it´s almost there http://uniquepharma.com.br/ now it changed color but it´s still not as the image attached
2 – when I click the menu PRODUTOS it goes to an anchor on the same page but the title of that block gets hidden

please help… thanks

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

1) Line icons do not have a fill color.

2) change this http://uniquepharma.com.br/#produtos to this /#produtos

Make sure the Products section is within a Row PB asset and the Row has a unique ID called produtos

[codeware]

1) Line icons do not have a fill color.
>>> is there another option available instead of line icons to accomplish what I need?

2) change this http://uniquepharma.com.br/#produtos to this /#produtos
>>> I did that but the result is the same

Make sure the Products section is within a Row PB asset >>> what does it mean?
and the Row has a unique ID called produtos >>> yes, it´s unique

[David Martin – Support]

1) You would need to choose another icon. Or remove the above CSS that set’s the fill to none and use this example:

.sf-icon-box .sf-svg-icon-holder.has-color path {
    fill: rgb(200, 49, 122);
}

2) You need to use a Row asset from the PB, you are using a 3rd party page builder.

– David.

[codeware]

about #2… the third part page builder is not the problem is not the problem… the problem is that the page has a visual effect that brings the page up for a few seconds to then bring it down to the anchor point but that only works on the first page load… how can I disable that effect?

[David Martin – Support]

2) I am not sure I see that, maybe I do not understand you. Try this:

Theme Options => General => Disable Hero Heading Intro => Off

[codeware]

that did not solve the problem

please check this test that I did using SWIFT PAGE BUILDER (so it´s not a 3rd part page builder anymore) http://uniquepharma.com.br/test
at the beginning of the paragraph TEST 1 you will see a link GO TO TEST 4 if you click there you will see that the title TEST 4 will be hidden under the page header

it seems that the problem is related to the sticky header option

[David Martin – Support]

I do not see any issue here:

Can you explain further what you want to achieve, it’s not clear to me.

Thanks.