Mobile Nav doesn't close when linking to items on same page

Mobile nav looks and functions fine when linking to other pages or even just linking to #, but it doesn’t close if you’re linking to something on the same page.

http://salesographer.webflow.com/

https://webflow.com/design/salesographer?preview=f01103d6a9ff21b5b1b2cc67f7f55d25

Could it be because I’ve set my nav’s position to absolute so that I could tweak the z-index (which you can’t do when it’s set to the default of postion: relative)? (EDIT: Switching it back to the default of relative doesn’t make a difference. Which I’m sure makes sense to people who actually understand all of this… :smile:)

Any ideas?

@Chris_Scott I’m not sure what’s going on, I was able to create a similar navbar without issues:

http://navbar-scroll-test.webflow.com/
https://webflow.com/design/navbar-scroll-test?preview=0043ac46d72b163bf601355aa35dffad

Can you compare my implementation to yours and see if you see any differences?

In my case, I set the navbar to Fixed (not Absolute). By the way, if you set your navbar to Relative, it should still give you the ability to edit the z-index - that setting should only go away if you set position to Static/Auto.

Interesting, I’ll have to poke around later tonight.

FWIW, the z-index option didn’t show up until I hit the relative button a second time. Odd.

Also, not sure if it’s related. My menu doesn’t even work in preview mode, I have to publish it to test it.

If anyone else has some ideas, I’d love to hear them! Not sure how I broke it so well!

Also, all of my main page content disappears when editing my menu in design mode. Not seeing that happen on yours. Just seems like things are oddly buggy for me and I’m not entirely sure what I did. Thanks for the help @callmevlad!

Ok, so I think I know what’s going on @callmevlad. I think.

I’m using a symbol as my nav bar, so when I have a link set to #buy-section on my home page using the “link to a section in this page” option, everything works fine. The menu slides out of the way and I slide down to the “buy” section. The problem is that when I navigate to a different page, say the About Us page, that link (since it’s a symbol), now tries to send me not to #buy-section on the home page, but instead to #buy-section on the page I’m currently on, so in this case /about-us#buy-section. There is no #buy-section on that page, so it just doesn’t do anything. And I can’t edit it for just that page because it’s a symbol.

So, to try to get around that, I just set the BUY link up in the nav bar as a standard link, linking to salesographer.com/#buy-section. This works fine when heading TO the homepage from any other page, since it has to reload to a different page anyway. But now when I’m on the home page, where the #buy-section exists, the mobile nav bar doesn’t close. Change that back to just a “link to a section on this page” option and it works. But now I’m back to the same problem on all of the other pages because it’s a symbol.

So, I either need to remove it as a symbol and just copy and paste the nav section into each page separately and have different links depending on if it’s linking to a section on the same page or if it’s linking to a section on a different page, or I need to find out why when I have the full URL in for a section on the same page, the nav bar doesn’t close.

TL;DR -

  • If I use “link to a section on this page” the nav bar closes and I’m brought to that section on that page, no problem, but I can’t actually get to that section from a different page, instead it tries to send me to a nonexistent section on the current page.
  • Using the full URL to a section on a page works if I’m coming from a different page, but the nav bar doesn’t close if I’m on the page where the section exists.
  • Using symbols for a nav bar that includes links to sections that do not exist on every page may not be the best idea.

I’ve just removed the symbols for now and use a non-symbol nav on each page (although, now that I think about it, I only needed to switch the one out on the home page) so that I can have different links on the home page than on all of the other pages. Even so, feel free to tinker to see if you can replicate. Thanks!

http://salesographer.webflow.com/
https://webflow.com/design/salesographer?preview=f01103d6a9ff21b5b1b2cc67f7f55d25

Good lord, I hope that all made sense.

chris.

1 Like