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.
🥋🥋🥋 Looks great and works well! For the tablet dimension, perhaps you want to consider the logo hover state? And yes, there's not much hover on touch devices!
In the post, I hint that media queries are currently used mostly for screen widths, which is true. However, there are many other kinds of media queries... it's the "media" in media queries! That article describes how to combine certain types of media queries to determine if the device has a hover state or not. 😁
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.
🥋🥋🥋 Looks great and works well! For the tablet dimension, perhaps you want to consider the logo hover state? And yes, there's not much hover on touch devices!
You might appreciate this article: https://ferie.medium.com/detect-a-touch-device-with-only-css-9f8e30fa1134
In the post, I hint that media queries are currently used mostly for screen widths, which is true. However, there are many other kinds of media queries... it's the "media" in media queries! That article describes how to combine certain types of media queries to determine if the device has a hover state or not. 😁
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!
🥋 🥋 🥋 Woo hoo! Your bar looks great and works well. Nice hover - great work!
https://codepen.io/yousifhmada/pen/OJgqKKO
🥋 🥋 🥋 Looks fabulous and works well! Thanks for sharing!
https://codepen.io/w0whitaker/pen/KKqbJez
🥋 🥋 🥋 Looks great! One thing - <div> can't be a child of <ul>. Love the CSS variables - great work as always!
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.
Absolutely fair -- there is nothing wrong with using rems or ems for breakpoints!
https://codepen.io/kldickenson/pen/WNOBqdq
🥋 🥋 🥋 Oooh, like the glow around the logo! Great job and thanks for sharing!