Help with Responsive Menu

Hey y’all,

Noobie here (obviously!), I’m in need of some help. Looking to make my current navbar easier to use for mobile devices.

I followed a tutorial off of YouTube to create a responsive navbar, but noticed that it doesn’t close itself when I click on one of the buttons. To close the menu, you’d have to click on “Menu” again, which isn’t what we want.

So to counter this, I’d rather have “Menu” be a hovering button that drops down to a menu instead. I’ve tried writing a bare menu to get the results I want, but I don’t know how to do it without creating a separate menu and nav. IE- I’ll make a button that has a drop down menu when I hover over it, I’ll hide it when it’s bigger than 640px, but not sure how to make it show as a regular navbar on a desktop browser.

In short, I just want to see what’s the efficient way to make the navbar I have now, turn into a hovering drop-down menu when it’s in mobile.

Sorry if that doesn’t make sense, I feel like I’m all over the place. But I’m really excited on the way of how my page looks, just the menu has made me run into a wall. Any help would be appreciated. Thanks!

My CodePen for the page here - https ://codepen .io/lastyk/full/ xMpppw

just post the whole link

I did, but it told me I can’t post the whole link for security reasons. :T

read this article it might help

1 Like

Sweet, I’ll give it a shot tonight. Thanks!

For the hover, you can just add this.

.wrapper:hover > .navigation {
  display: block;
}

As long as the page scroll far enough down when you click a link it will close the menu.

1 Like

@lasjorg that was exactly what it needed, THANK YOU.

I’m going to re-write it all again, in hopes of cleaning it up and making a simpler nav now, all while using the code you gave. Thanks again.