I have a problem with my navbars on the start page.
I’d like the navbar to be a bit different depending on where you’re viewing the site (desktop/tablet/phone).
It’s an interaction I want to keep in desktop view, but not in tablet/phone view.
I’ve tried making a new navbar without the interaction, but I can’t use one navbar on desktop and another in tablet/phone.
The smoothest thing would be to be able to apply interactions to the navbar in the different views.
Like the option “Visible on:” Desktop / Tablet / Phone.
Also there is another way to handle some of those issues.
For example if you have a reveal interaction of a logo, you hover somewhere, and the logo moves down into view, or goes from transparent to opaque.
Well that happenbs because to begin with, your logo is moved out OR made transparent. And the interaction DOESN’T SAY “move down”, but rather say “Move to Original position” (Or : be opaque).
Well the original move out, or the original opacity is CSS, so you can set it differently on each device.
So set the move out for desktop only, and revert it for devices. Same for opacity.
Then the interaction will fire on devices but effects won’t be noticeable as:
the element is already at original position
the element is already opaque.
Now if you have a hover-out interaction that may be another issue but you see the idea.
OK I see but when I hover out the text goes away so there IS a hover out.
Actually there’s one or more design solutions for your issue.
You should get rid of the entire scorrling nav bar for anything other than desktop (as you have it set now)/
So now you interaction isn’t a problem anymore.
Now add you logo and name for mobile where you want and hide it for desktop.
I personally wouldn’t keep the floating navbar reveal on mobile. On mobile, that’s not the expected experience. On mobile, things should be fixed and straightforward, focusing on visitors needs on mobility.
But I can understand that you do want to keep the interaction.
but you see the idea.
