So I’ve built a navbar and am trying to get the menu to display in a flex column when I click the hamburger menu on smaller screens. I have a vague idea how to do it, but am not quite sure how to go about it, any help would be appreciated!
I’ve loaded it into codepen for comvenience: https://codepen.io/marcel-penney/pen/vYdZpwb
I think you need to be a little more specific about what you are trying to do. The menu looks like it is displaying in a column to me. Are you asking about the placement of the menu?
Right, sorry. I’ve been working on it since I posted this. I’ve managed to get as far as displaying it as a column, now I need to style it as a proper dropdown menu but it’s proving difficult. The class I’ve added also needs to be removed if it goes back to a bigger screen while it’s active.
I would approach this a little differently. I wouldn’t put a class on the menu to trigger its display. I would put it on the button instead. In addition, I would move the button before the menu in the DOM (this will make it much more accessible as well). After doing both of these things, then you can use the class on the button to toggle the menu display based on whether the button has that class. This automatically takes care of your problem because the button won’t be there for wide screens and thus the menu will go to its wide version by default.
If you really want to make it accessible then instead of a class on the button you would toggle the aria-expanded property on the button between false and true and base the CSS on that. This is known as a disclosure widget. This codepen shows how to implement it. (And the associated article for the codepen).
Wow, you’ve given me a lot to work with, I should be able to figure something out from here. Really appreciate it!
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.