Side Social Icons change color on different section background

Design help General
1

Hi there,

Can anyone help me figure out the possibility to change the side social icon colors when on the different section background? Please kindly help!

Grace

Here is my site Read-Only: https://preview.webflow.com/preview/graces-test?preview=d744e69d30237299bb9f824f1f91fc1c

http://graces-test.webflow.io/

2

I would duplicate the icon container and make the icons fixed within each section with overflow none and change the ones in the black section to white. I also suggest using font awesome for your icons. You have more control than using images.

3

@DFink, thanks for your suggestions. I had tried it but it doesn’t seem to work. Can you please kindly take a look if there’s anything I missed besides using font awesome for the icons? Thanks a lot!

https://preview.webflow.com/preview/graces-test?preview=d744e69d30237299bb9f824f1f91fc1c

4

I honestly can’t figure out why it’s not working but I think it’s due to your site structure. You should apply your flex values to the actual section and put your H1 inside of that along with the social icons. You have this div inside each section for your content which could be causing the issue. Are you new to webflow? It can be hard to understand the proper site structure of the box model if you haven’t done web development before. This understanding is crucial for using Webflow.

5

@DFink, thanks for looking into it. I updated it with a very simple structure (section → headline, social square) and follow your suggestions of applying flex values to the section and set social square to fix, overflow:hidden. I guess the issue is that two social square overlay to each other and how should I solve that?

https://preview.webflow.com/preview/graces-test?preview=d744e69d30237299bb9f824f1f91fc1c

And yes, I am new to webflow and still in the learning process. I had some html and css experiences before but not an expert. If you don’t mind, can I get your advice regarding the best practice of the structure, or any other suggestions to help me speed up this learning curve? Btw is it the normal way to structure a page with a Page Wrapper → Sections → Container → Content ( Div Block → Content )?

Really appreciated for your help :slight_smile: