Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
mrx3
8,742 PointsI just completed my responsive navigation and would like some opinions on it. Codepen included.
I just completed a navigation using media queries. I was wondering what some of the people think about, and if my CSS is okay. Thank you for any advice in advance.
Codepen. http://codepen.io/mike316/pen/eNvOGN
3 Answers
Caleb Frieze
29,582 PointsI just took a look and I think it's pretty solid. I like that you took a "Mobile First" approach. One thing that I think all navigation bars should have though, is some type of hover effect just to let the end user know that they are interacting with your links.
Another little something that I've come across, is instead of applying button dimensions (width, height, border-radius, etc.) to the <li>, I like to apply it to the <a>. This way if someone is on your site on a mobile phone, their space to actually click the button is more than just the link.
(You will see this happen in frameworks too)
By no means is what I suggested the "right way to do it", but just something that I think will extremely help!
Other than that I think it's a solid nav! :D
James Richardson
2,823 PointsAs you add more to the navigation list you may feel as if it will take too much space on mobile devices. In some cases designers, like myself, like to use drop down menus for screen sizes 460px and smaller.
http://codepen.io/jrich/pen/YXZKae
This is a pretty standard markup of what I'm referring too.
Jonty Ward
1,982 PointsIt works, which is the core principle. Depending what / who it is being developed for it might meet the criteria perfectly. I agree with James on this one. Using CSS media queries helps us to drastically improve the UX for different devices and UI outputs. Check out this very basic fiddle showing a media query for mobile devices.
http://jsfiddle.net/jontyward1988/ttej9k55/
Keep up the good work.
mrx3
8,742 PointsThanks Jonty for the kind words, and the link.
James Richardson
2,823 PointsI have to say, I really like that a lot. Looks way better than mine and doesn't require that much more code than mine.
mrx3
8,742 Pointsmrx3
8,742 PointsThanks for the comment. I forgot to put in the description about the pseudo classes. I always add those, I just didn't do it yet. Thanks again for your comment, I really appreciate it.