Foundry Navigation Bar - dropdown menu issue

I am using Foundry for my RW project, and it is shaping up nicely. However, I am having trouble with the navigation bar (Nav.Bar) especially when it turns to the drop-down menu for the mobile view sizes. I find two anomalous/buggy behaviors :

  1. the first issue is common for both Safari, Chrome on Mac and iOS devices:
    The drop-down menu items, both the current and target, are highlighted and remain so when the touch/mouse hovers over the items.
    (See attached image) This is not consistent with their standard gui behavior.

  2. the second issue seems to be specific for Safari on OSX and iOS. (Chrome seems OK, Firefox cannot check.)
    Say, I choose a navigation item on the drop-down menu to migrate from page A to page B. After that, when I go back to the original page (A) by using the back button of the browser, I find the drop-down menu is still left open in page A . The standard behavior in such a case would be that when one leaves page A, its drop-down menu should have been closed - usually upon MouseUp or TouchUp - as its business is done. (even though some may prefer otherwise if the page’s sole purpose was for facilitating navigation to other pages.)

Am I missing something here?

03dc007fbad6c35bcd42eaa7a6b3431bfd780b13_1_483x500

Have you got an URL for us, please?

1 Like

I’ll start here because this one is much easier I think – This is a browser related situation. I suspect the browser is using a cached version of the page when you hit the back button to make reloading it quicker. This just comes down to how the browser is handling the reloading of the page when you hit that back button.

It would be good to have a look at your project file so I can see how you’ve got things setup. I’d like to be able to seethe structure of things and how you’ve got your stacks configures. If you can send over a ZIP file containing your project file I will take a look at it.

it is at https://mathgamehouse.com/

I just sent you the slimmed version of my project file via messaging.

As I noted in the message, the issue (2) seems to originate from Nick Cates’ Depth Stack. The pull-down menu is left hang when the “from” page was using the depth stack’s banner in it. When going from a page that does not use Depth stack, but only the Foundry stacks, and I go back there, the pull-down seems to have closed at least within my limited experiment.

Curiously, however, I also note that the very front page of my project, that is not using the Depth stack, nor the nav.bar but instead using Nav.Overlay, seems to suffer the same issue: the overlay navigator is left hang, when I go back to the page.

(I have not checked any of these on MS Explorer, however, which I am reluctant to try for fear of opening a can of other worms… )

I did some more experiment. I removed the Depth stack from one of the pages (let’s call it page C) and repeated the above experiment. (from C to A and “back” to C) In this case, the issue remains (on Safari) ;-(

On Chrome, it seems OK. But Safari continues to give trouble even after I empty Caches and hard-reload.

I am no longer sure whether Depth stack is the sole cause of the problem.

The Depth stack is not likely to have anything to do with this specific situation. Safari just seems to be going back to the page and not reloading the page when you hit the back button. Sorry if I was confusing before when I used the word cache. I didn’t mean to insinuate it was using the browser’s cache. It is just caching it locally instead of reloading the page. It is just a choice the programers made it seems.

As for the navigation – I’m not sure I understand the situation I guess after looking at it. I had assumed one thing but when I saw your project file that was not the case. The active page is highlighted and when you hover over another page that one gets highlighted as well, simultaneously, to show you’re hovering over it. This is the intended behavior. So if that is what you’re referring to then all is as it should be. If not, perhaps you could create me a quick video using something like ScreenFlow, or make me a few screenshots to explain it. I might just be missing something here in your description.