Transition still occurring on mobile even though element is hidden

Hello All,

I’ve built a shrinking navigation on scroll using the Demo Kit. However, on tablet and mobile I do not want this to occur and for the navbar to remain fixed to the top. The interaction is attached to “Desktop Spacer” selector which is hidden for tablet and mobile but the height transition still occurs on the navbar immediately on page load. Any suggestions?

https://preview.webflow.com/preview/oak-park-dental-associates?preview=98dba0a21d8cd516dc05851a50502a12

You can see the resulting extra whitespace in this screenshot:

For anyone experiencing this with a shrinking header, I resolved it by setting the height in the custom code field using media max-width.

@media (max-width: 479px) { .navbar {height: 60px !important;} }

glad you found that workaround. Sorry for the late response. A lot of people have been asking for interactions based on breakpoint. I’d like this too actually. Hopefully interactions 2.0 will have this, but at this time I’m not sure.

Good luck with the project! :slight_smile:

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.