Mobile menu wont close after menu is clicked

[zigakolar]

I added 2 links in menu which are ment to scroll you to a specific section of the home page. That is fine if I use inpage link and everything is fine, BUT, when I m on other pages of the website, those inpage links do not work.

so I used the link with # like: http://agencijaepic.si/#ekipa to get me from other pages to specific section of the homepage…

it works fine on desktop, but on mobile i get following problem: MOBILE MENU DON’T CLOSE AFTER YOU CLICK THE LINK WITH # IN YOU ARE ON THE HOME PAGE … it scrolls the page in the background, but it do not close itself.

https://preview.webflow.com/preview/agencija?preview=0fbb8077464c46a64df78462e7d29d2d

[zigakolar]

I noticed that when on homepage http://agencijaepic.si I click on the btn “EKIPA” in the menu the page will take me to the right section but the menu wont close.

same on desktop and mobile.

anyone who knows what to do, please help
https://preview.webflow.com/preview/agencija?preview=0fbb8077464c46a64df78462e7d29d2d

[sabanna (Anna)]

Hello, @zigakolar

Try to remove unnecessary settings from the nav menu (“dropdown” class): position: fixed on the tablet mode.

[zigakolar]

Hi!

thank you for your help. But unfortunatley, it does not help. I tryed. besides I need the fixed position in order to my navbar stays fullscreen wide on tablet.

any other sugestions? Is this this posibile to achieve with webflow?

[sabanna (Anna)]

Yes, of course, it is possible. It is working on hundreds of sites. In your case it just something wrong with settings

[zigakolar]

Can you please check if you find something else, I tryed all I could think of

[sabanna (Anna)]

I see you removed in-page linking from the menu. Do you still want to make it work? I tried some idea but can’t check it without publishing.

[zigakolar]

hey hi, thank you for your effort.

yes ofcourse I do, I put the “EKIPA” meni back and generated new link for you
https://preview.webflow.com/preview/agencija?preview=0fbb8077464c46a64df78462e7d29d2d

[sabanna (Anna)]

Ok, could you try to change link address from http://agencijaepic.si/#ekipa to /#ekipa and publish the site.
In the preview mode this link will not work, but it should work on published site.

[zigakolar]

Hi,

I changed the link to /#ekipa but the problem remains

[zigakolar]

I removed “EKIPA” link on the published site for now because of this bug we have. I created new preview link for you with “EKIPA” link, if you still want to help me find the solution.

do you think I should build new navbar?

https://preview.webflow.com/preview/agencija?preview=0fbb8077464c46a64df78462e7d29d2d

[zigakolar]

I tryed to simulate the same thing on one of my test sites.

the problem is the same…

http://b12-starter-ziga-kolar.webflow.io (if you click on the link “Our companies” menu will not close after is clicked.

how the other webflow users do it? what am I doing wrong?

[sabanna (Anna)]

Ok, it is really weird.

I went back to one of my works, where I had this type of menu structure and found out that I didn’t use menu (navigation) as Symbol on the home page. I just changed links address to default styles of in-page navigation.

My guess it may be related to the fact of using Symbols.

[zigakolar]

hm, cant be that, because on the other test project there are no symbols but the problem is the same.

[JFly (Jeff)]

Hey @zigakolar @sabanna! Any findings on this issue?

I have a similar situation where we are trying to integrate a mobile Webflow nav menu into a single-page app. So the menu and footer remain and just the middle content will refresh. However the mobile menu won’t close after an item is clicked.

This code was moved outside of the webflow dev environment as it’s being integrated into our own code, otherwise I’d share a link to the designer.

JFly

[cyberdave (Dave Sloane)]

Hi @JFly, I was looking at the site earlier reported by @zigakolar, and I cannot see the issue still. Could you PM me the link to the published site, I can check if there are any obvious errors on the exported, published site.

[JFly (Jeff)]

Thanks @cyberdave

You couldn’t see the issue @zigakolar described on http://b12-starter-ziga-kolar.webflow.io3 ? It’s happening on both desktop and mobile. If you open the mobile menu and click on “Our Companies”, the page scrolls down to that section but the menu won’t collapse. Clicking on the other menu items on his site collapses the menu, but the apparently aren’t linked to anything on the page.

Otherwise, I might be able to get you a link to the site on one of our production servers via PM shortly.

Thanks again!

JFly

[cyberdave (Dave Sloane)]

Hi @JFly, the issue is that the drop down will only close if the Section link type in link settings is used. In the case of the site for http://b12-starter-ziga-kolar.webflow.io, the Companies link is using the external url field.

Instead of:

It should be:

The Section link in Webflow has special meaning with script behind it, and will automatically close the menu, while linking to a section using the external url link type will not.

Hopefully that clarifies it.

Probably this could be updated to close that on external link type. The difference is that the external url was designed to use with urls off page and the menu close action is not triggered.

The section link on the other hand, is on the same page, so the menu knows to close when the section scrolling starts.

My guess is the external url field was used so the same nav link could be used on all pages, but in this case I would create one version of menu using Section links for home page, and use the external url field type in a duplicate of the menu on other pages.