To achieve smooth hover transitions like Tesla’s navbar, ensure you’re using the hover interaction properly. Add separate black and white assets for each nav item, stack them in the same position, and set the default state for one to opacity: 0. Use Webflow’s hover interactions to fade between them: on hover in, set the white asset to opacity: 1 and the black asset to opacity: 0, and on hover out, reverse the opacity settings. To avoid glitches when moving between items, wrap each nav item in a div with enough padding to ensure the hover state isn’t lost during transitions.
For further clarification, do you mean that I should add a multiple separate Tesla logos for each nav item and target them using “selected element”?
I tried your method adding padding in between divs but the transition wouldn’t be as seamless as Tesla’s website navbar (where the nav items are close to each other and the assets like logo and icons has no glitch for black and white while hovering in between nav items)
Is there another method or do I have to use custom code for this?
PS. Thank you for being patient with me, as a new webflow noob
, maybe my mind was malfunctioning, totally didn’t think of this 