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

JavaScript jQuery Basics (2014) Creating a Mobile Drop Down Menu Perform: Part 3

Posted by Nadav Reis
Nadav Reis
5,561 Points

Menu not disappearing when screen is narrow

Here is my snapshot: https://w.trhou.se/hz9mgton7w

The menu is not disappearing when the screen gets smaller than 568px. I tried to match my css up with Andrew's but I do not see why it is not working.

The select does, however, disappear when the screen is larger than 568px. That part is fine.

Please help me figure out why the menu doesn't disappear when screen is narrow.

Thank you so much!

4 Answers

Nadav Reis
Nadav Reis
5,561 Points

Thanks for responding. I realize that the issue was the comments in the .css file. When copying over from the app.js file, we brought over the comments using the // format.

CSS requires /* */ styled comments.

Glenré Charl Labuschagné
Glenré Charl Labuschagné
23,204 Points
Glenré Charl Labuschagné
Glenré Charl Labuschagné
23,204 Points

Head's up: you definitely need the viewport meta tag though.

Glenré Charl Labuschagné
Glenré Charl Labuschagné
23,204 Points
Glenré Charl Labuschagné
Glenré Charl Labuschagné
23,204 Points

Hi Nadav,

You might want to look at your link tags in the head of your html documents:

The title and the charset are not to be included in the link tag:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>no title</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <!-- your body code here -->
</body>
</html>
Nadav Reis
Nadav Reis
5,561 Points
Nadav Reis
Nadav Reis
5,561 Points

Thanks!

Amy Clark
Amy Clark
7,892 Points
Amy Clark
Amy Clark
7,892 Points

This really needs fixing in the course files but @charl heistein's suggestion solves it.