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

CSS

Posted by John Levy
John Levy
1,451 Points

Menu tabs disappear when it turns to the mobile screen.

When I shrink my page down the menu tabs in the navigation bar disappears when I shrink it down to the mobile version. I am pretty sure the issue is on line 9 in the CSS as when I remove the "display: none" it shows the drop down menu but it also make the whole page go black and the menu options are also in two columns down the page and not in order, it also pops up on the opposite side of the page. What should I change in my code to make the drop down menu work properly? I have attached my code below. http://codepen.io/Johned22/pen/mAAVXB Thanks in advance

Daniel Gonzalez
Daniel Gonzalez
22,105 Points

Hi John,

The issue does seem to be on line 9 of your CSS. What were you trying to achieve? I'd be more than happy to help! If I change the code on line 9 to "display:block" I can view the ul and li elements in one column.

4 Answers

John Levy
John Levy
1,451 Points
John Levy
John Levy
1,451 Points

I want to have the drop down menu in the left hand corner when the user clicks on the navigation bar. I have tried what you said and used "display:block". I also tried "display:inline-block". Both attempts causes the drop down options to pop up but it also causes the whole page to be black. The drop down options are also on the right hand side in two columns rather than on the left side all on one column like I am trying to do. Where do you think I have gone wrong? Thanks

Daniel Gonzalez
Daniel Gonzalez
22,105 Points

I looked at the code and it seems that on line 31 under class .nav-list you have the following style background: #111; which gives you a background color of black across the whole screen. The reason why the whole screen is black is because the .nav-list class has a width of 100% so you are expanding the <ul> tag across the whole screen.

I still only see one column nav with the following list items: "Contact, instagram shoutouts, apps, ebooks, personal & online training and home" (I am viewing your code on the Chrom browser).

Try removing the class .nav-list from the <ul> this moves the text "@2016 tunnel vision, fitness, making mirrors look better, to the bottom of the screen (as the footer). You can change the background-color by removing the style background-color: blue from the .nav class. But also make sure you change line 9 to display: block and let me know if the changes work.

John Levy
John Levy
1,451 Points
John Levy
John Levy
1,451 Points

I dont know if this makes a difference but for the larger media queries the problem area which is the nav ul on line 9 I used this code- nav ul { margin: 0px 0px 0px 0px; width: 62%; float: right; }

Thanks

John Levy
John Levy
1,451 Points
John Levy
John Levy
1,451 Points

I am still having issues so I decided to start again from scratch. Now it works and I am trying to add the social icons but the social icons do not show up. I have attached the full code below. Right now it is only for screens sizes 320px. What should I change to make the social icons show up? I want them centered at the top of the page. Thanks in advance http://codepen.io/Johned22/pen/VKPvkx

Daniel Gonzalez
Daniel Gonzalez
22,105 Points
Daniel Gonzalez
Daniel Gonzalez
22,105 Points

Hi John,

I think the social media icons are not displaying on the on codepen.io because codepen cannot locate the files as they are not being hosted on the site. I believe if you have a "PRO" account on codepen you should be able to host your asset files (img) and then be able to view then the way you linked in your <img> tags. If you are using a regular text editor Atom or Sublime and hosting the images in your own project files you should be able to view them no problem. I hope this helps!