Top bar disappears when I use modal

Foundation for Sites
#1

I am using a modal on our contact page to show two pictures of the entrance to our office. The link to the modal is lower on the page so the user must either scroll down or use the “map” link at the top to go directly to the map. Above the map is a link “View Pictures” which is the element that opens the modal. The problem is that when the modal is opened, the top bar menu disappears. It will reappear if the user scrolls up to the point where the top background image starts to scroll into view.

Here’s the page on our test server: Contact Page

I am using Foundation 6.6.1 with downloaded CSS and JS only.

#2

I just upgraded the Foundation CSS and JS files to 6.6.3 with no change in the modal problem.

#3

This behavior happens on Chrome and Chromium, but not Firefox, on both Ubuntu 16.04 and Windows 10.

#4

I think I have it fixed. I found this article on the interaction of scroll-linked effects, in particular when using a sticky element. By removing the Foundation attributes to implement a sticky top bar, and then using the following CSS for class “top-bar” (overriding the Foundation CSS), it is now working:

.top-bar {
  position: sticky;
  top: 0px;
  z-index: 999;
}

According to caniuse.com, this is supported for all current browsers (except for a few table elements, but that’s not used here).