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.
🥋🥋🥋 Nicely done! Your mobile window only goes as high as the header because you have a postion: relative on that style. If you want it to go to the top of the window, you'll need to take that out. Thanks for sharing!
Hey, I couldn't quite get the transition to work and that's due to the fact that I'm toggling between display: none & display: block, so I shouldn't expect them to work unless I play around with the visibility property but I believe (not very certain thought) that setting the display property as none is more accessible than just hiding it (I've read this somewhere but I can't recall, appreciate your input on this, thanks)!
WebAIM indicates that display: none and visibility: hidden hides content from all users. Hiding it (as we do with absolute positioning and moving it offscreen) means the content is still accessible to screen readers. That may be what you want in the end. On a mobile device, the hamburger button moves the nav out of the way so that more information fits on a single screen. Screen readers don't have that issue. In any case -- https://webaim.org/techniques/css/invisiblecontent/#techniques
🥋🥋🥋 Truly a master, William! The bar looks great and works well. Love the extra text that pops up on mobile. Can't wait to see your (future) dropdown menu!
🥋🥋🥋 Awesome! Everything looks great. You are missing one } to close your tablet media query. Without it, your font changes to serif when you go to mobile. Weird! But the bracket fixes it. Thanks so much for sharing!
https://codepen.io/kldickenson/pen/XWaJdbp
🥋🥋🥋 Looks fabulous and works well! Thanks for sharing 😁
https://codepen.io/romola/pen/KKqjLWZ?editors=1100
🥋🥋🥋 Very nice -- bar looks great and the crazy gradients are working well! Thanks for sharing 😁
Thanks! I'm starting to notice the use of icons+text a lot as navbar alternatives, and appreciating their value more.
https://codepen.io/miklaan/pen/mdwZypN
Fine and nice. :target is awesome solution!
🥋🥋🥋 Awesome job! Navbar looks great and works well. :target is pretty awesome 😁
https://codepen.io/yousifhmada/pen/PojgwXm
🥋🥋🥋 Nicely done! Your mobile window only goes as high as the header because you have a postion: relative on that style. If you want it to go to the top of the window, you'll need to take that out. Thanks for sharing!
Hey, I couldn't quite get the transition to work and that's due to the fact that I'm toggling between display: none & display: block, so I shouldn't expect them to work unless I play around with the visibility property but I believe (not very certain thought) that setting the display property as none is more accessible than just hiding it (I've read this somewhere but I can't recall, appreciate your input on this, thanks)!
WebAIM indicates that display: none and visibility: hidden hides content from all users. Hiding it (as we do with absolute positioning and moving it offscreen) means the content is still accessible to screen readers. That may be what you want in the end. On a mobile device, the hamburger button moves the nav out of the way so that more information fits on a single screen. Screen readers don't have that issue. In any case -- https://webaim.org/techniques/css/invisiblecontent/#techniques
https://codepen.io/w0whitaker/pen/xxrMvYx
🥋🥋🥋 Truly a master, William! The bar looks great and works well. Love the extra text that pops up on mobile. Can't wait to see your (future) dropdown menu!
🥋🥋🥋 Awesome! Everything looks great. You are missing one } to close your tablet media query. Without it, your font changes to serif when you go to mobile. Weird! But the bracket fixes it. Thanks so much for sharing!