Scrolling fixed header not showing on mobile device

Question

I have a fixed header that changes to a sticky header on scroll using JS.

The dropdown menu works when in mobile view showing on Google Dev Tools and Firefox Responsive

Answer 1

Does the dropdown not open on mobile devices?

Your .sticky css class has overflow: hidden; which is keeping the dropdown hidden. If you put it there to avoid horizontal scrolling, use overflow-x: hidden; instead. Then it won't cut the dropdown off.

Generally you want overflow-y set to scroll when you have a fixed element with a dropdown on mobile. In case the menu extends beyond the bottom of the screen.