Mike H D Posted July 11, 2023 Share Posted July 11, 2023 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 Link to comment Share on other sites More sharing options...
The Old Designer Posted July 11, 2023 Share Posted July 11, 2023 Cassie has a good explanation here.. 1 Link to comment Share on other sites More sharing options...
Mike H D Posted July 11, 2023 Author Share Posted July 11, 2023 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 More sharing options...
Solution Rodrigo Posted July 11, 2023 Solution Share Posted July 11, 2023 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! 2 Link to comment Share on other sites More sharing options...
Mike H D Posted July 11, 2023 Author Share Posted July 11, 2023 Brilliant, thanks both for your patient help. That is working like a charm 1 Link to comment Share on other sites More sharing options...
Mike H D Posted January 9 Author Share Posted January 9 Hi all, Sorry for digging up an old post, but I am trying to modify this setup a bit and am struggling to work out how to do it. This is where I am with on Codepen: See the Pen WNYdwLy by MikeHarrisonDesign (@MikeHarrisonDesign) on CodePen When the close button is pressed, instead of the animation playing in reverse, I don't want the animation to run at all, I would like it simply to reset. So the menu disappears the instant the close button is pressed. I tried using progressto reset it but that didn't work. What is the best way of doing this? Link to comment Share on other sites More sharing options...
PointC Posted January 9 Share Posted January 9 See the Pen e4fd92282bd481d5f27e3ed96f1bb48c by PointC (@PointC) on CodePen 2 Link to comment Share on other sites More sharing options...
Mike H D Posted January 9 Author Share Posted January 9 Ah so progress was the right thing to use, but I was applying it wrong! Thanks for the pointer that is working great Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now