Streaming live at 10am (PST)

Hover interaction not working on shrinking navbar


#1

I am using the navbar widget with an interaction to make it shrink on scroll. One of the links has a hover interaction to show a megamenu displaying thumbnail images of some baseball teams. Both interactions work great when I am at the top of the page. Once I scroll down the page and trigger the navbar shrinking, the hover interaction stops working. I'm hoping someone can help me figure out why that is happening. My public link is here. Thanks for looking.


#2

Hi @Aksaunders, thanks for the question. I took a look, and it seems that the mega menu has an initial appearance set to move the element up 100% at page load and is positioned absolutely, not fixed to the page.

This works great when the page has not been scrolled, because everything is at the right position it should be.

When the page is scrolled though, the menu is still at the 100% up position at the top of the page and is not following the menu, because it is using absolute position relative to the body.

I would experiment with a fixed positioned slide out menu, instead of the absolutely positioned menu.

I hope this helps!


#3

Ok, thanks. I will work on it.
EDIT: giving the mega menu a fixed position and changing the interactions slightly achieves the effect that I was looking for. Thanks @cyberdave for the assist.


#4

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.