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


8,742 Points

I 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

I 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

8,742 Points

Thanks 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.

As 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.


This is a pretty standard markup of what I'm referring too.

It 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.


Keep up the good work.

8,742 Points

Thanks Jonty for the kind words, and the link.

I have to say, I really like that a lot. Looks way better than mine and doesn't require that much more code than mine.