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

HTML

Website Review

I'm currently working on a project and I built this site using Twitter Bootstrap as my foundation. The only issue I can't seem to figure out is having my logo show up in mobile view. I have it in the @media tag, but it's still not displaying...any ideas would be appreciated.

Look forward to the feedback.

www.planbenchmark.com

3 Answers

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher

Hi Justin Witz,

The reason that's happening is because the logo is nested inside the .nav element, which gets displayed to none at the 978px breakpoint. If you place it outside of .nav it should display at every breakpoint.

You have the logo in a div with class="nav-collapse collapse". This declaration is located in bootstrap-responsive.css and the issue at hand is in the @media (max-width: 979px) where it states height: 0; overflow: hidden.

What is happening is it hides the logo in a smaller than typical desktop setting. I'm using Firefox and doing ctrl+shift+M and selecting different layouts with width of less than that 979px to test.

So, two things I see is I don't think you want your logo in those classes, and as well I don't think you want to have your logo declared as part of a nav. Another point regarding a separate issue is that your logo is inside a <ul> but not inside a <li> -- it's simply an <a><img> set. This is semantically incorrect, which Guil Hernandez noted in a thread yesterday. I would suggest you refactor to remove the <ul> as I don't see it being needed since you only have the logo inside it anyway so it's essentially a list of 1.

Thanks guys, got this resolved. It's amazing how you can sometimes miss the little things.