In the bottom right corner of the CodePen example, there should be a button that says Fork. Click it. This will make a copy of the code that you can save to your CodePen account.
While anyone can edit or fork a CodePen, you can’t save and share your work without creating a CodePen account. It’s easy and free. The button to do this is in the upper right corner of the CodePen window.
Haa, i got it. I had problem with hovering logo, because li:first-child a:hover is not good option for logo, because it presents like display block... So just using .logo:hover fix that problem...
Definitely a fan of mobile-first (or as I call it, narrow-first) design. In order to be responsive to both changes in view port width and font size (don't forget, the user can manually change the font size) I always use rem units for my break points. Using this method allows the content to determine where the break point should be instead of some arbitrary px width. Much more responsive and much less of a headache if you ask me.
https://codepen.io/romola/pen/jOwjWLV?editors=1100
It didn't occur to me until done that a:hover doesn't mean much on a phone, does it? So, I should rethink the mobile effects.
https://codepen.io/miklaan/pen/MWodMbW
Haa, i got it. I had problem with hovering logo, because li:first-child a:hover is not good option for logo, because it presents like display block... So just using .logo:hover fix that problem...
Learnt a lot from this, thanks Jen & Erika!
https://codepen.io/yousifhmada/pen/OJgqKKO
https://codepen.io/w0whitaker/pen/KKqbJez
Definitely a fan of mobile-first (or as I call it, narrow-first) design. In order to be responsive to both changes in view port width and font size (don't forget, the user can manually change the font size) I always use rem units for my break points. Using this method allows the content to determine where the break point should be instead of some arbitrary px width. Much more responsive and much less of a headache if you ask me.
https://codepen.io/kldickenson/pen/WNOBqdq