Jump to content
Search Community

Responsive navigation issue

Mike H D test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts


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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...