Making a site for a client and wondering if there is a way of having the same item shadow as I have on my mockup for active and hover states.
I’ve tried uploading the .svg without shadow, this resulted in a box shadow that goes around the div element instead of the desired result of appearing on the .svg object.
Then I tried creating a .svg with shadow and this requires a much bigger divs structure than I planned (because of the shadow around the object).
What you are asking is akin to being surprised at Webflow being unable to let you draw over your png’s or modifying your gif’s length, or editing pdf’s etc.
SVG is not the same code html and css editors can understand and edit. Of course there are svg-editors on- and offline that let you do it but they are created specifically for that. What you are asking is “why doesn’t Webflow has in-built svg editor?”. And consider this - even if it did have one, the results of your editing in shadows for your svgs will result in the same large code inside the svg structure.
I feel like you totally misunderstood me and instead of trying to help, filled this post with drama.
I don’t care if the same effect can be created with 2 separate divs, or any other way. I really don’t.
The intention of me writing this post was not bragging about webflow not able to do something, rather it was about how to create the same look as that I have on my mockup.
The title I picked might of been confusing to you and I’m sorry if it did.
To further clarify my question, I’m asking for everyone’s advice here about how can I create a shadow similar to the one I have on my mockup.
Please, if you take your time to reply, let it be a technical comment instead of translating what I have said to something that sounds good to you, i.e:
" What you are asking is “why doesn’t Webflow has in-built svg editor?” ".
Please note:
Making a site for a client and wondering if there is a way of having the same item shadow as I have on my mockup for active and hover states.
Well then, it does look like I’ve misunderstood you question I apologies if my comment looked snarky.
Anyway as far as I can tell the best way to do the shadow you want is to add the same (but black!) object under your nav block (you may use the same recoloured svg shape) and apply blur effect to it. That should do it.
I apologies if my comment looked snarky.
