You try it: How would you style this navbar? There are three levels: desktop only, changing layouts across media queries, and a hamburger button implementation.
Fork the CodePen problem, make your changes, and share your answer in the thread below! Comment your work to tell us why you made your markup choices.
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.
I am a little confused about 1) how to not make the desktop-only version wrap (or is that considered a desktop-only version?); and 2) whether flex-flow:no wrap is doing the breakpoint changes expected in a responsive version. I won't get into the Hamburger CSS at this point.
No worries on the hamburger. Navbar layouts may be changed with CSS. Of course, that's all beyond the scope of this course -- however, if you look here: https://codepen.io/collection/XqrZBZ at challenges 5-8 (solutions are included as well), you'll see a few ways to build navbars with CSS and make them responsive. These go with an upcoming LinkedIn Learning course that's hopefully to be released any day now.
Specifically to answer your changes --
a. You could write Flexbox to display a horizontal navbar on desktop and switch to a vertical navbar at smaller dimensions with a media query.
The wrapping could be used in responsive design, but designers aren't usually a fan of two rows of horizontal nav. They're hard to click with fat fingers on phones. Generally devs reorient navigation to go vertical on phones, then usually hide the nav behind the hamburger button.
🎉🎉🎉🔥🔥🔥 Well done! Looks good and works great! One usability tip - you might consider leaving your logo out of the hamburger button collapse state. That way your site is still branded across breakpoints. Thanks for sharing, and don't worry about "being behind" -- I'll check in and give you feedback 😁
I'm stuck on the 2nd part of this challenge. I want my flex item (the <ul>) to change from 'row' to 'column' at a certain screen size, but I can't get it to work.
You're missing a } at the end of your a style around line 58 😁 Put that in and it works great!
FYI: You absolutely could change your row to column with Flexbox. You could also change your UL to display: block; -- that's the default behavior. It kills Flexbox and gets the links to stack also. Either approach is just fine!
Remember - if something "doesn't work," you can always run it through the CSS or HTML validators. They are very good at picking up syntax issues like this. 😁
Looks great! Can you do something different? If you turn off the borders, what else could you do with styling? Could you create a bunch of different pills that change colors on rollover? It would be good practice for you. :-D
https://codepen.io/romola/pen/MWpmxej?editors=1100
I am a little confused about 1) how to not make the desktop-only version wrap (or is that considered a desktop-only version?); and 2) whether flex-flow:no wrap is doing the breakpoint changes expected in a responsive version. I won't get into the Hamburger CSS at this point.
No worries on the hamburger. Navbar layouts may be changed with CSS. Of course, that's all beyond the scope of this course -- however, if you look here: https://codepen.io/collection/XqrZBZ at challenges 5-8 (solutions are included as well), you'll see a few ways to build navbars with CSS and make them responsive. These go with an upcoming LinkedIn Learning course that's hopefully to be released any day now.
Specifically to answer your changes --
a. You could write Flexbox to display a horizontal navbar on desktop and switch to a vertical navbar at smaller dimensions with a media query.
b. flex-flow: nowrap means the boxes don't wrap onto another line. See https://developer.mozilla.org/en-US/docs/Web/CSS/flex-flow
The wrapping could be used in responsive design, but designers aren't usually a fan of two rows of horizontal nav. They're hard to click with fat fingers on phones. Generally devs reorient navigation to go vertical on phones, then usually hide the nav behind the hamburger button.
Thanks. I will try to make it go vertical.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/ -- might be helpful for understanding the various properties.
https://codepen.io/kajal-28/pen/vYxgwJz
Nicely done -- awesome vertical navbar! 🎉🎉🎉🔥🔥🔥
Thank you 😊
https://codepen.io/weberbj/pen/eYgweXp?editors=1100
I think I made it through everything, I thought this one was pretty fun.
Looks good! You have a basic desktop bar - do you think you could set this up with some breakpoints for mobile devices?
A little behind, time-wise: https://codepen.io/kldickenson/pen/mdRadqy
🎉🎉🎉🔥🔥🔥 Well done! Looks good and works great! One usability tip - you might consider leaving your logo out of the hamburger button collapse state. That way your site is still branded across breakpoints. Thanks for sharing, and don't worry about "being behind" -- I'll check in and give you feedback 😁
https://codepen.io/pmmueller/pen/rNjPqNX
Skipped a few days, but wanted to share the responsive navigation.
🎉🎉🎉🔥🔥🔥 Just like a tutorial in making hamburger buttons -- well done!
Disadvantage with the above version was that the menu button on small screens did not work if JavaScript was disabled (for whatever reason).
So I have now created a new version based on progressive enhancement: Works without JS, works better with (two lines of) JS:
https://codepen.io/pmmueller/pen/WNRWaeZ
To test just change the size of the window and enable/disable JS for the navigation with a click on a button .
Interesting! How odd it didn't work without Javascript.
https://codepen.io/jarchaff/pen/xxgmwaB?editors=1100
I'm stuck on the 2nd part of this challenge. I want my flex item (the <ul>) to change from 'row' to 'column' at a certain screen size, but I can't get it to work.
You're missing a } at the end of your a style around line 58 😁 Put that in and it works great!
FYI: You absolutely could change your row to column with Flexbox. You could also change your UL to display: block; -- that's the default behavior. It kills Flexbox and gets the links to stack also. Either approach is just fine!
Ah, oh my goodness haha. Thank you, that totally fixed it!
Remember - if something "doesn't work," you can always run it through the CSS or HTML validators. They are very good at picking up syntax issues like this. 😁
https://codepen.io/kelsey-van-ert/pen/RwKYvwv
Looks great! Can you do something different? If you turn off the borders, what else could you do with styling? Could you create a bunch of different pills that change colors on rollover? It would be good practice for you. :-D
🎉🎉🎉🔥🔥🔥 woo woo! You got it!!! Works great 😁