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.
It was very easy now to create horizontal navbar. I surprised myself :)
Btw, I used just padding on <a> element to make a gap between each of them and used something new for me, "nav li + li" is very very useful and easy to make a pipe and it is possible to change color on hover too! :)
Thank you Jen & Erika for that detail, small but important!
I had trouble getting the menu links to have a big, clickable area, and have a bottom border that was only as wide as the text, and have a border on the right that had some padding.
display: block should be on the A style, not on the LI (the LI is already block).
To get a bottom border that's only as wide as the text, that's in opposition to a big clickable area. In the first case, that's a inline element, and in the second, a block. You might need to do something weird in that case:
<li><a href="#"><span>my link</span></a></li>
Make the A the block display, big clickable link, etc. The SPAN stays inline, as wide as the text, so you can add the underline there...
so! just to make things more complicated, I thought I'd try getting the bottom 'border' without touching the HTML. I thought I could do that by setting the right and left borders to the background color, and make the bottom border gray. But borders have a miter at the corners, so it looked weird. I found a codepen (https://codepen.io/tobiasbueschel/pen/yZOoMB) that demonstrated various ways of getting borders with straight joins, and ended up using box-shadows to create the effect.
anyways, I'm having a lot of fun with this! thanks so much for taking the time to do all this!
🥳 🥳 🥳 Looks great! For the A style - you put padding on the left and right, not the top and bottom. That gives you a very narrow clickable area. I think it's OK, but personally I'd probably add a little more from a design perspective. Thanks for sharing!
If you place padding on the link, you should do it on the A style directly, so that padding cascades to the a:hover style. If you place the padding on a:hover only, then you'll get that twitch in the navigation that you describe. 😄
Having fun lining up the text logo with the menu too: https://codepen.io/kldickenson/pen/ZEymVoY
🥳 🥳 🥳 Nice -- looks fantastic!
https://codepen.io/romola/pen/YzQvjxe?editors=1100
🥳 🥳 🥳 Looks fantastic! Coded well and lovely design choices. Great job!
https://codepen.io/miklaan/pen/ZEyRRwd
It was very easy now to create horizontal navbar. I surprised myself :)
Btw, I used just padding on <a> element to make a gap between each of them and used something new for me, "nav li + li" is very very useful and easy to make a pipe and it is possible to change color on hover too! :)
Thank you Jen & Erika for that detail, small but important!
Can't wait for next challenge! :D
🥳 🥳 🥳 Awesome!!! Looks great, works well, nicely coded. Great tip on changing the pipe color on hover, too! Thanks for sharing 😄
Your challenges are really instructive, thank you.
https://codepen.io/maeyler/pen/LYLrOpy
🥳 🥳 🥳 Very clean and simple! Looks great. I like the background hover color.
I had trouble getting the menu links to have a big, clickable area, and have a bottom border that was only as wide as the text, and have a border on the right that had some padding.
display: block should be on the A style, not on the LI (the LI is already block).
To get a bottom border that's only as wide as the text, that's in opposition to a big clickable area. In the first case, that's a inline element, and in the second, a block. You might need to do something weird in that case:
<li><a href="#"><span>my link</span></a></li>
Make the A the block display, big clickable link, etc. The SPAN stays inline, as wide as the text, so you can add the underline there...
https://codepen.io/jen4web/pen/QWgxamp -- see if that helps? Put some debugging borders on the LI, A, and SPAN and I think it might be clearer?...
so! just to make things more complicated, I thought I'd try getting the bottom 'border' without touching the HTML. I thought I could do that by setting the right and left borders to the background color, and make the bottom border gray. But borders have a miter at the corners, so it looked weird. I found a codepen (https://codepen.io/tobiasbueschel/pen/yZOoMB) that demonstrated various ways of getting borders with straight joins, and ended up using box-shadows to create the effect.
anyways, I'm having a lot of fun with this! thanks so much for taking the time to do all this!
Yeah, I've seen a few people use box shadows instead of borders. That's a weird one to me, but it works! Glad you're having fun 😄
https://codepen.io/w0whitaker/pen/bGRKWBa
🥳 🥳 🥳
🥳 🥳 🥳 Looks great! For the A style - you put padding on the left and right, not the top and bottom. That gives you a very narrow clickable area. I think it's OK, but personally I'd probably add a little more from a design perspective. Thanks for sharing!
If you place padding on the link, you should do it on the A style directly, so that padding cascades to the a:hover style. If you place the padding on a:hover only, then you'll get that twitch in the navigation that you describe. 😄