having trouble wrapping my head around mobile menus
hi all, i really love doing front end work, enjoy really getting into the gritty with SCSS, but my big road block is mobile menu design. I have watched videos from KP of course, and codewithsadee and for whatever reason I just blank when it comes time to implement my own.
conceptually I understand that (in a mobile first context) i am structuring the nav items in a container, making an off screen nav and in JS targetting the off screen nav and placing it's zindex above all but scaling out into bigger sizes and implementing it overall on my own without just following someone for whatever reason throws me off.
if anyone could advise on how they got comfortable and fluid with making these menus i would greatly appreciate any and all pointers!
3 Replies
Practice. There is no other trick.
I also struggled at the beginning but I subscribe to the "efficient first" school of thought over "mobile first".
In many cases mobile first does = most efficient since everything stacks , then you can fold in the layout complexity but for mobile menus, I make the nav for desktop first then within a media query I will style it for mobile menu. That way I don't do a bunch of work to make it into a mobile menu and then undo everything to get to the near-default styles for the desktop view.
yup, mobile first can make things easier
but it's not always a silver bullet, or the right approach for everything
sometimes, you might find it easier to use absolutely hideous math with grids to be the easiest approach
or just use flex
the thing is: don't be affraid of doing it wrong because you then won't learn why it is "wrong"