Interaction V.S Image Link Issue

Hello,

This is my first attempt at building something with webflow so apologies in advance for any butchering of webflow etiquette.

Here is my preview: https://preview.webflow.com/preview/noevis?preview=b587e1b91515558170421bad9d43d81b

Here is my ish: I have a scroll link (yellow roundel w/black arrow), which works fine UNTIL you use the nav button/interaction. I’ve started to create a custom nav/menu (probably the issue), which works to my liking. However it seems to nullify the scroll interaction permanently once it has been used.

If potential suggestions could help me keep my nav and find a fix for the scroller that would be fantastic. Failing that, any help would be much appreciate.

100 of the finest thanks in advance,

Ross

Hey @rossfranciiiis welcome to the Webflow Community! We’re glad that you’re here :slight_smile:

This is looking good!

I’m not entirely sure which “Scroll link”(aka an Anchor Link :smiley: ) you are referring to, should there be an anchor link somewhere on the page? Can you also post a link to the published version of the page as well please for review? Please post any screen shots of the issue which you are encountering as well. A great tool for screen shots & annotation is Skitch, it’s FREE and available on nearly all platforms. :smile:

We were working on another menu interaction and found that the use of a dumby menu closing link helped a lot instead of using 2nd click interactions for the menu. Here’s a link to that post here:

Keep up the good work and please let us know if you have any questions. :slight_smile:

Waldo :smiley:

Hi Waldo,

Thanks for your speedy response. I’m glad I’m here too. Published link is: noevis.webflow.io

I have no idea where the Anchor Link went but I have put it back on there now.

That is my issue in a nutshell. The link works before interacting with the menu.

Thanks, Waldo,

Ross

Hello @rossfranciiiis!

Reason of this problem in “super-customizing” navbar.
Navbar is generic element, which has it’s own structure and functions by default. By removing navmenu from navbar element, you eventually broke it’s functionality.

There is “w-nav-overlay” which is part of navmenu element. It is appear when you open “mobile-type” navigation. And since navmenu was removed, but generic menu-button is still exist, there is appear errors and this “overlay” never goes away and covering whole page. That’s why link become not clickable.

FOR FIX THIS PROBLEM recreate the navbar again, but do not break structure of it. Only thing that will not change functionality is you can take elements OUT of container. You also can use your existed classes and put images that you have, inside the menu-button. In this way you will not need any interactions for navmenu and it will work properly.

ONE MORE NOTE: make z-index of manu-button higher, than z-index of navmenu.

Result you can see on this screencast:

Regards,
Anna

1 Like

Hi @sabanna

Wow, first of all thanks for explaining the issue, and then thanks for the solution. That was really kind of you. I will try this out. Using this method will I be able to put the menu button at the top (aligned to the logo) as per my original design?

Thanks again,

Ross

Sure you will, @rossfranciiiis. I just used your classes and didn’t change anything except z-index.
If you will have some more questions, do not hesitate to ping me here :wink:

100% amazing. You’re awesome. One last question and then I’m ready to have a go. Is there any way to keep the transition from a ’navicon’ to a ‘X’? Or what would be best practice to achieve something similar?

I assume you talking about animated menu-button. You can leave that animation as it it now. But you will not need to animate navmenu. It is done by generic functionality of navbar.

Cool. I’ve got it all working now. Haven’t tried the ‘X’ animation yet but I will give it a go tomorrow. Thanks for all your help again @sabanna

2 Likes

You are welcome :smiley: Our community in 99.9% will find the way to bring your creative ideas to live :wink:

1 Like

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