2

Okay so I have this fiddle here, where you can see I have one small nav, and it changes upon scrolling. The small nav is used minimalstic as the focus is needed on the hero image; and after that the nav becomes a little bit bigger and requests a little bit more focus from the viewer.

But now upon working on my mediaqueries I want to just show the second nav for mobile users, since they cannot hover on the first nav (due to not having a mouse obviously), so they have no use for the first navigation and it's useless for them.

But I only show the second nav with the use of Jquery/JS. 

if ($window.scrollTop() > navShiftBreakpoint) {
        $navContainer.addClass( 'full' );}
 //full = the second nav & //navShiftBreakpoint = 500px

I cannot force to add a class in HTML from css, so any idea on how I can fight this problem?

Thanks for the effort/help in advance.

Zanic L3
  • 918
  • 9
  • 22

1 Answers1

0

You can use this script to detect if the device is mobile and if it is, avoid initiating scroll callback and directly apply hidden class.

Community
  • 1
  • 1
xitter
  • 538
  • 3
  • 15