Responsive navigation issue

[Mike H D]

Hi,

I am working on a responsive nav, where I would like it to work in the following way:

 

• On large screens, show the company logo on the left and the navigation listed horizontally to the right
• On small screens, show the logo and a menu button, which triggers the navigation to slide down and cover the whole screen.

 

I have got pretty close, the small screen behaviour seems to be ok, but on larger screens my navigation menu is still translated up and my elements are still invisible.

 

I think this is where I need to be using matchmedia, I have tried to implement it but I don't think I have the syntax quite right. If anyone could point me in the right direction that would be awesome

See the Pen poQpjrM?editors=1010 by MikeHarrisonDesign (@MikeHarrisonDesign) on CodePen

[The Old Designer]

Cassie has a good explanation here.. 

 

 

[Mike H D]

Thanks @The Old Designer for the pointer, I have given the video a watch and have a bit better understanding now.

I have done a new codepen, and implemented matchMedia on it. This is working a bit better, but for some reason the button to trigger the dropdown is only working intermittently? It seems to work on first attempt, but then if I resize to large and the back to small it stops working.

 

Thanks for your help, if you could let me know where I might be going wrong with this that would be great.

 

See the Pen WNYdwLy?editors=0010 by MikeHarrisonDesign (@MikeHarrisonDesign) on CodePen

[Rodrigo]

Hi,

 

This seems to be what you're trying to achieve:

See the Pen WNYdxZm by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[Mike H D]

Brilliant, thanks both for your patient help. That is working like a charm