@elaineleung
Posted
Hi Juca, good work on this challenge and also in learning how to put it together. About the overlay, I see that you have it but I'm not sure which container it's in, and for some reason it looks like it's there in the screenshot. Anyway, ideally the overlay should have position: fixed in order to fill the entire viewport. I have an example on CodePen that you can check out here: https://codepen.io/elaineleung/pen/poLpzge
I've also completed this challenge but I wrote it in React and not plain JS; feel free to check it out also if you're interested.
Good luck!
Marked as helpful
@jucajulian0907
Posted
Hello Elaine! Thank you very much for your comment! The overlay is made based on the box-shadow property of the lateral negation container, I see in your codepen example that you have done it basically the same and I am happy, of course my code lacks a lot of optimization. Previously I was looking for a way to do it with javascript but I have not been able to. Thanks again for your feedback, it has helped me a lot!
@elaineleung
Posted
@jucajulian0907 Glad to help! Yes, I did have a box shadow, but it was more for the nav bar when it slides out, and I quite like that effect as well; the overlay itself just uses an opacity, which is something I rely on a lot. Also, I meant position:fixed for the overlay (I just fixed the comment above as well, no pun intended), but of course position:absolute works as well, depending on which object it's anchored to. Good luck working on that overlay 🙂
Marked as helpful
