SVG Icon Disappearing in Navbar Dropdown Menu: Troubleshooting Tips | Relume Community

SVG Icon Disappearing in Navbar Dropdown Menu: Troubleshooting Tips

Hey Lumers, Im using the SVG converter to plug in some icons and have run into some super weird behaviour that I can’t explain. When pasting an icon into a dropdown menu in my navbar, if that same icon exists elsewhere on the canvas, it disappears when the dropdown menu is closed. 🤔 (see video) Ive given the icons separate classes and made sure they are not being affected by the interaction. Anyone have any clue?⁉️ read only link Thanks in advance

8 comments

Emily M.
·
Hey, I just opened your read-only link and those icons weren't showing up to begin with, and I wasn't able to open the drop down in the nav. When I checked the inspector I couldn't see anything causing the svgs not to show up. Maybe you could reupload them with a different file name and use the new ones in the main page, using the old file for the drop down only? My mouse was also invisible as I moved over most of the site, but I guess that's something you plan to fix later. Super nice website!!
❤️1
Lukas S.
·
Hey Emily, thanks so much for taking the time to check it out. Did you go into preview mode? In preview mode you should be able to see my custom cursor and also hover over the services menu item to open the dropdown and show the silly icons for some reason 😆 You can see it again in this video:
Emily M.
·
I did go into preview mode but the custom cursor only showed up for a few seconds and then seemed to disappear. It looks very cool though, I'm inspired ! Lmk if you find a fix for the icons disappearing 🤷‍♀️
Lukas S.
·
I didnt find a fix so much as just replaced the icons with actual SVGs rather than html embeds (through the relume SVG converter). Honestly I think it was a bug. Anyway the cursor is super weird cos for me it shows up and stay there. :S. good to know someone has trouble with it. Might have to do some device testing
Matt J.
·
Lukas S. your preview link doesn't work anymore but maybe because you've moved on. If you want me to take a look, I'd be keen to do so. If you can reproduce it again that is.
Lukas S.
·
Hey Matt J. , although I managed to get around it by simply adding the SVGs in as images rather than embeds (through the SVG converter), I’ve reproduced it for you to take a look by just adding the same embed into my hero next to the buttons (see screenshot). Notice even when not in preview the icon goes transparent when the services drop down in the navbar is not open. Here is the Read only But I think it might be a bug with webflow maybe? Cant image any other reason. The only thing that tied the embed in the drop down to the embed on the page was that the code inside the embed was the same. They had different classes and neither embed were targeted in an interaction as far as i can tell.
Lukas S.
·
Matt J. I don’t suppose I could ask you to take a quick look at the issue I posted in this thread whilst you’re in there could I?: https://relumecommunity.slack.com/archives/C02MS2V0FSP/p1711019814634199
✅1
Tim D.
·
https://webflow.com/apps/detail/svg-import
💪1