[ad_1]
Hi all,
I recently found interest in wordpress and check this sub on a frequent basis for I am just creating some pages for myself.
Currently I am stuck with integration code from Codepen to the Avada theme.
The pen I want to integrate is the following:
[https://codepen.io/Gogh/pen/gOqVqBx](https://codepen.io/Gogh/pen/gOqVqBx)I tried with code block in a container and that works quite well, but I wanted to have the three glowing rings in front of a picture. For now I just managed that the pen is somewhere left, right, bottom, top from where I want it to be. I don’t want to work with negative margins because normally that breaks the page on different screen sizes.
As of now I couldn’t find a solution how it would be possible to have this pen in front of another block. Is it even possible?
[ad_2]
You have to use custom code in the WordPress menu for the rings. And apply that class to the block. You can try :before.
Avada is a massive POS and will probably hinder you at every step.
For this CSS to work, you need the combination of relative and absolute positioning working together – [https://css-tricks.com/almanac/properties/p/position/](https://css-tricks.com/almanac/properties/p/position/)
Here’s how you can add custom CSS when using Avada. [https://avada.com/documentation/how-to-add-custom-css-in-avada/](https://avada.com/documentation/how-to-add-custom-css-in-avada/)