Menu icon Foundation
Dropdown not working when multiple topbars?

I've been trying to use multiple topbars on the same page. In the documentation, this seems possible.

In the following test site: [deleted], the top bar is absolutely dead - no clicks or hovers whatsoever.

The second topbar, works (dropdown works).

The third topbar, when you open one of the records (f.i. Ace Suares), behave weird, the dropdowns don't work, but the normal buttons work, f.i. the 'close' button (the X at the end of that bar). When clikcing on a dropdown, a js error ensues: Uncaught TypeError: Cannot read property 'is_hover' of undefined foundation.topbar.js?body=1:151

I think, the problem with the first topbar might be that I made the first two top bars 'fixed', but to prevent the second bar to slide under the first, I added a top margin of 45px. So, this might be a z-index problem I suppose.

Any help would be appreciated.

Screenshot   01082014   03 38 33 pm

topbardropdownsmultiple

I've been trying to use multiple topbars on the same page. In the documentation, this seems possible.

In the following test site: [deleted], the top bar is absolutely dead - no clicks or hovers whatsoever.

The second topbar, works (dropdown works).

The third topbar, when you open one of the records (f.i. Ace Suares), behave weird, the dropdowns don't work, but the normal buttons work, f.i. the 'close' button (the X at the end of that bar). When clikcing on a dropdown, a js error ensues: Uncaught TypeError: Cannot read property 'is_hover' of undefined foundation.topbar.js?body=1:151

I think, the problem with the first topbar might be that I made the first two top bars 'fixed', but to prevent the second bar to slide under the first, I added a top margin of 45px. So, this might be a z-index problem I suppose.

Any help would be appreciated.

Screenshot   01082014   03 38 33 pm

This post has been closed. No new replies can be added.

Ace Suares over 5 years ago

Oh, and if I un-fix the second toolbar, so only the first topbar is class='fixed', then the dropdowns in the first topbar are working again, but in the second and third are not.

I can't bake bread of this!

Ace Suares over 5 years ago

The z-index problem between the first and the second toolbaar can be solved, see http://codepen.io/acesuares/pen/ozdEv

(Giving the second 'fixed' div a z-index of 9 seems to do the trick).

Ace Suares over 5 years ago

The problem with the 'third' topbar, which are generated by Ajax, could be solved to a call to $(document).foundation() as suggested in
https://github.com/zurb/foundation/issues/3885#issuecomment-30979889