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.
This was fun -- I explored adding a gradient to the text of the h2 and I added a bottom border with a deep border-radius on the list items. Very happy with the outcome!
🍦 🍦 🍦 Wow, thought you had taken those colors out of the photo, but they're word colors (ivory, chocolate)! Great find and they blend so well with the page. Thanks for sharing!
🍦 🍦 🍦 Looks fabulous and yummy! You don't need that .size class -- you have display: block on the A style, so you're good to go here. Thanks for sharing!
🍦 🍦 🍦 Wow, those links look fantastic! True, legibility could be better, but those are perfect for an ice cream or gelato site - fun, pretty colors, good enough to eat. Thanks for sharing!
🍦 🍦 🍦 Lovely and clean, William! Do you think you could make this navbar without the height attributes? Height can be helpful if you have a fixed-height item (like a decorative box). However, when text is introduced, it needs room to grow under a user's settings. Height can cut off text if it gets too large. Thanks for sharing!
That would do it! 🍦 🍦 🍦 Navbar looks great! If you're wondering why the hover state doesn't fill the whole area, you have some padding on the li style (twice). Move that padding to the a style, and your hover will go from border to border. Nice job and thanks for sharing!
This was fun -- I explored adding a gradient to the text of the h2 and I added a bottom border with a deep border-radius on the list items. Very happy with the outcome!
https://codepen.io/idlehands1969/pen/myeOJOp?editors=0100
https://codepen.io/keoverto/pen/VwzbMqG
🍦 🍦 🍦 Fantastic! Looks great and works well. Thanks for sharing!
I couldn't resist my color choices! https://codepen.io/kldickenson/pen/jOwzErY
🍦 🍦 🍦 Wow, thought you had taken those colors out of the photo, but they're word colors (ivory, chocolate)! Great find and they blend so well with the page. Thanks for sharing!
https://codepen.io/Shamar3/pen/zYzRJgG?editors=1100
🍦 🍦 🍦 Looks fabulous and yummy! You don't need that .size class -- you have display: block on the A style, so you're good to go here. Thanks for sharing!
Hi Jen,
Okay, thank you.
I see that since it is block, it will cover the entire length.
I got carried away with color and it didn't necessarily enhance the visibility of the menu, but it was fun:
https://codepen.io/romola/pen/XWgVOeM?editors=1100
🍦 🍦 🍦 Wow, those links look fantastic! True, legibility could be better, but those are perfect for an ice cream or gelato site - fun, pretty colors, good enough to eat. Thanks for sharing!
https://codepen.io/w0whitaker/pen/zYzpmXp
🍦 🍦 🍦 Lovely and clean, William! Do you think you could make this navbar without the height attributes? Height can be helpful if you have a fixed-height item (like a decorative box). However, when text is introduced, it needs room to grow under a user's settings. Height can cut off text if it gets too large. Thanks for sharing!
I hadn't thought about that! I replaced it with padding, which should allow the text to resize properly, right? thanks!
Exactly! Padding is a much better choice, and your design will be more flexible. 😁
https://codepen.io/maeyler/pen/mdwpjZr
🍦 🍦 🍦 Looks fantastic, Akif! Nice styling, good colors, and attractive layout. Thanks for sharing!
https://codepen.io/miklaan/pen/XWgVaXL
I hope I got it well.
🍦 🍦 🍦 Super fun! Love how the hover states look like gelato 😁 Thanks for sharing!
Thanks Chris - I get a "page not found"?
That would do it! 🍦 🍦 🍦 Navbar looks great! If you're wondering why the hover state doesn't fill the whole area, you have some padding on the li style (twice). Move that padding to the a style, and your hover will go from border to border. Nice job and thanks for sharing!