Streaming live at 10am (PST)

Different interactions in navbar on same page (desktop/tablet/phone)


#1

Hello!

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.

Is there a good way of doing this?
Any tips?

Thanks in advance!

Kind regards,
Amanda


#2

Why?

You could set the visibility of each.

For Desktop:

For everything else:

Although it doesn't solve one issue: tablet landscape defaults to the Desktop view.


#3

And you can use that system on just the tiniest element, (your logo, I think that's what you're working on) instead of using it on the whole menu.


#4

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 :slight_smile: but you see the idea.


#5


#6

I love it :smiley:



#7

Hahah!
Oh, poor Vincent, thank you for addressing my issues again :slight_smile:

This is great, I just didn't understand how to use this, though it had to do only with the ID..
This solves it, at least in a way that I can understand :slight_smile:

Thank you! :sparkles:


#8

This is a bit more complicated, but seems to be solving it in a better way!

Can I set this up in Webflow or do I need to go into the code?


#9

This man deserves and entire cake.
With marsipan animals on it.
Having a party... :hatched_chick: :elephant: :camel: :sheep: :octopus: :monkey: :whale: :cake: :tada:


#10

I'm not sure it will work... is your original interaction only SHOWING on hover, and not hiding on hover out?

If it hides on hover out, it may be not possible.

Can you share your read only link with me so I have a look at your interaction?


#11

they exist!


#12

Yes, it's only showing :slight_smile:

But it's linked to another item (the logo), when hovering over the logo the text appears.

Here: https://preview.webflow.com/preview/amanda-thomsson-portfolio-2-0?preview=4150fe8e5aca7f0228b533141fb45bf1


#13

Hahah!
No no no, that's emojis having a party!

This is animals having a party on a cake:
(Only, I couldn't find animals in marsipan...)
And picture more animals!


#14

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. :slight_smile:


#15

OMG that cake :smiley:



#16

Yes, exactly :slight_smile:

That solved when I tried the "Visible on"-option!

Great, I'm about to! :slight_smile:

No, you are right! It's not supposed to show on mobile, would be confusing!
I just haven't gotten to that yet :slight_smile:
So slow!


#17

I know!
That cake would make anyone happy :smile:


#18

I've been able to do it on my website as well! (been trying to figure how to do it with Webflow)

Vicent deserves something like this..


#19

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