Nav Bar Transition/Interaction

Hi there,

I’m trying to recreate a nav transition, similar to this website:

http://denzelin.webflow.io/

The creator of this website has tried to explain his process to create the menu, but I need a little more help…

If you look at my website below, you’ll see i’ve worked out how to create a 100% height and width div block, that fades in when you click menu, and it does disappear on a second click.

https://webflow.com/design/samuel-petyt-design#

I would like to know how to do the following things:

  1. I would just like the menu to fade in, not move down and fade in
  2. I would still like to be able to see ‘Samuel Petyt Design’ as well as ‘Close Menu’ (rather than ‘Menu’) when the menu is open (as well as the menu links, which i’m yet to create)

Many thanks in advance!

Sam


Here is my public share link: LINK
(how to access public share link)

Hello, @Samuel_Petyt.

First of all, you shared an incorrect link :confused: It is a link to your Designer mode and nobody else, except you, will be able to open it.

Second, when I am opening your published site, there is no menu for open it. So, could you please, re-publish your site and share read-only link with us.

How to share a read-only link:

Thanks in advance! :slight_smile:

Anna

Apologies!

Here it is: https://preview.webflow.com/preview/samuel-petyt-design?preview=874fcc3fba18143bb2c716d6fea293dd

You will have to remove transform option (Move 100% up) from the “Menu overlay” and exclude step with move it down from the interaction. Instead of moving up/down step, use display: none/block option.

For logotype link: give it position: relative and z-index higher than Menu overlay has.
Close Menu and all other links you can add inside the Menu overlay like in any other div.

Hope it helps.

Cheers,
Anna

1 Like

I’ve gone wrong somewhere…

https://preview.webflow.com/preview/samuel-petyt-design?preview=874fcc3fba18143bb2c716d6fea293dd

I can no longer apply the interaction to the ‘menu button’…but I can apply it to the logotype. I think they’re both ‘text links’…so I’m a little confused as to what i’ve done to one and not the other.

For clarification, I want to apply the interaction to the ‘menu button’ and not the ‘logotype’.

Also, the ‘Menu overlay’ div now stops me clicking into any of my other divs to edit text etc. How can I solve this?

edit: I’ve realised that If I turn the div’s display setting to ‘none’ it lets me select everything else. Is this my only option?

Thanks!

Well, it seems you ignored my advice about display: none - display: block :slightly_smiling:

Right now Menu overlay is covering all the content on the page. The only thing you did is made it transparent, but it still there.
Previously, you used transforms option and moved all div up. Now I suggest using Display settings. Option display: none also will hide this element and you will get free access to all other elements on your page.

Then, in the interaction, the step, which previously moved Menu overlay to origin position, will have to be changed to display: block step. And Step, which moved Menu overlay up - to display: none step

1 Like

Thanks you’ve been very helpful. I’m not ignoring you I simply just don’t understand fully at the moment!

One last problem. How do I create an interaction where clicking ‘menu’ opens the nav, and then clicking ‘close menu’ in the menu overlay div closes it?

https://preview.webflow.com/preview/samuel-petyt-design?preview=874fcc3fba18143bb2c716d6fea293dd

Now you just need to create one more interaction, for “close menu” link. That interaction will have only one step - closing Menu overlay.

P.S. Sorry for using word “ignored”, didn’t mean to be rude :confused: Just wanted to notice that you missed that part.

1 Like

Thanks. Is it just me or does easing in and out only work periodically?

https://preview.webflow.com/preview/samuel-petyt-design?preview=874fcc3fba18143bb2c716d6fea293dd

If you look here, it doesn’t ease in on the first click (i’ve tried force refreshing several times) but then when you close it and try again, it does. Also, i’m really struggling to get ease out to work on ‘close menu’

thanks for your patience!

Hold on, I will make a video. There are just minor issues.

Here we go

2 Likes

This worked great thanks.

Am I being stupid, or does none of this work on tablet and mobile? :confused:

https://preview.webflow.com/preview/samuel-petyt-design?preview=874fcc3fba18143bb2c716d6fea293dd

I’ve also noticed that in my selector, when I’m looking in tablet or mobile view, the icon is green in the ‘selector’ section, whereas the desktop icon is white. Does this suggest something is wrong?

If you could advise as to how I can get my menu working on mobile devices, that’d be awesome. :grinning:

Hi again, @Samuel_Petyt :slightly_smiling:

You have a problems with the menu because on smaller devices (starting from tablets) Menu container is covering “Close menu” button, it has z-index higher than buttons.

So all you need to do is make z-index of the “Close menu” button something more than 1.

It is Webflow UI :slight_smile: Nothing wrong with that.

White icons and font = default (predefined settings)
Blue font = changed settings
Yellow font = settings were changed on parent element or wider media query
Green icons = settings for media query smaller than desktop
Purple icons and font = dynamic content (CMS)

:wink: Cheers,
Anna

3 Likes

Thanks so much Sabanna, the answer was so obvious!

Hopefully you won’t hear from me again, but I dare say you will. :grinning:

1 Like

Good luck with finishing this project :slight_smile:

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