Body doesn't fade out / Menu

Hi,

i hope someone can help me. i created a page with a template and i i did something wrong, can’t figure out what…:-/

When you click on the burger menu and select “Leistungen” it will go to the page section but the “Full page menu” or the white “body” won’t fade out…

can someone see the error i created?
thanks in advance!
Joel


Here is my public share link: Webflow - Niels Bartel
(how to access public share link)

Hello,

Its because you ask on click on Leistungen to fade the body to 0% which means you ask it to fade the entier page to 0%.
You want to change the element affected from body to Full page menu like so

And now it’s working :slight_smile:

Hum “small issue”
When you do that, the cross doesn’t goes back to burger state.
It’s not as simple as it seems (i mean going back to burger state is, but the burger animation says on second click to fadeout “Full page menu” so your first click won’t work).
I’ll do a quick video to explain to you how to make it work

Hi zbrah,

thank you so much for helping me!!!

Bests Joel

hey zbrah,

can you help me?:grimacing: sorryy
best regards joel

Ahah yes sorry it’s kinda complicated they are a lot of interaction

Ok so first you want to rebuild the burger when you click on Leistungen.
This is how you do that
https://v.usetapes.com/ZUPGnozPS7

Now the new problem is :

Since this menu is not designed for id link in the same page, the designer put two steps on the click interaction.

On first click the menu open, titles fade in, the burger moves to a cross.
On second click everything goes back to origin (menu display none, the cross to burger, etc)

So the issue now is:
Since i moved everything to origin on the interaction made on Leistungen, when you click on the menu button after that the first click (which is the second click for webflow) won’t do nothing (in fact it does move back to origin everything)
Do you understand that ?

Now moving to a lot of interaction :sob:
This is where i ll show you the process but i won’t do everything.

Since the issue is on that second click, we will create a new div (named clicker) position absolute and same w/h than the Burger menu. This div will do the second click interaction of burger menu but on first click.

Z index will be higher than Bugers menu’s (which is set to 5000 on burger, so let’s say 6000).

The origin value for clicker will be display none. We will display it when we click on burger,

and then display none when we click on clicker.

We also need to display none clicker when we click on Leistungen

Ok so that way we have a new button (clicker) where we can set all the second click interaction of burger menu to the first click.

You will have to do the same process for Leistungen. Add on first click all the second click interaction.
You will also have to rebuild the burger when you click clicker. Just add a new interaction on clicker and do the same process than here Google Chrome – Tapes
That way it should work. I’rm probably missing something, but if you already do that and share again the link wip i ll help you from there.

1 Like

This is the only “smooth” way i see to do that.

Another way is to just to put the link of the id here

If you do that, you have to remove the whole interaction on Leistungen.
On click, it will refresh the page and go to the section Leistungen.
It’s no very elegant but it works :wink:

Hi zbrah,

thank xou so much i would prefer the last way described. but it is not working can you check? i unchecked all interactions on “Leistungen” but it still doesnt just loads up the page section

what i really dont understand i basically copied this site that i created:
https://preview.webflow.com/preview/hotelanna-fc1904a1751cab39bb54eada3baf1?preview=585b67998513f899d3e78784fd79d763

and built the new site on it, i didnt intentionally changed and code… and on the site above everything works…

so to not make it too complicated and i am sorry that it is taking so long… can you tell me which interactions i have to uncheck so the page sections are accessible just by a direct link?

https://preview.webflow.com/preview/nielsbartel?preview=dc0c4037f31df4b1d205fab228561421

Hey,

I’m not sure if i understand your question.
You don’t have to uncheck something to go to the page section with direct link, you just have to put the direct in the link/url settings in webflow, just like you did on your preview site.

Your url to this id is http://nielsbartel.webflow.io/#Leistungen
The things with that as i explained before is that since it’s a new url, it will refresh the page and then go to the id section which is not necessarily beautiful.