Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

Bradley White
Bradley White
21,285 Points

Why is the #menu ul not hiding?

//Media queries
@media (min-width: 320px) and (max-width: 568px) {
  #menu ul {
    display: none; 
  }
}

@media (min-width: 568px) {
  #menu select, #menu button {
    display:none; 
  }
}

//Javascript code from app.js

//Create a select and append to #menu
var $select = $('<select></select>')
$("#menu").append($select)
//Cycle over menu links
$("#menu a").each(function () {

  var $anchor = $(this)

  //Create an option
  var $option = $('<option></option>')

  //option's value is the href of link
  $option.val($anchor.attr("href"))

  //option's text is the text link
  $option.text($anchor.text())

  //append option to select
  $select.append($option)
})   

//Create button
var $button = $('<button>Go</button>')
$('#menu').append($button)

//Bind click to button
$button.click(function() {
  //Go to select's location
  window.location = $select.val()
})

7 Answers

Gleb Vorobjev
Gleb Vorobjev
13,703 Points

When in your CSS file make sure you aren't using double slashes "//" for your comments. That will cause syntax errors. Make sure you use / * * and * * / in CSS.

Alex Lowe
Alex Lowe
15,147 Points

In case anyone else is having this issue, this works. It was the double slashes I copied and pasted over from the js file.

Valentin Fezza
Valentin Fezza
18,166 Points

I'm out too but I got it working (I just don't know how):

@media (min-width: 569px) {
  #menu select, #menu button {
    display: none;
  }
}

@media (max-width: 568px) {
  #menu ul {
    display: none;
  }
}
David Endersby
David Endersby
24,915 Points

You could try changing your second media query to min-width: 569px. What does your html look like?

I seem to be in the middle of the same issue at the moment. Here is the full code.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
</head>
<body>
    <div id="menu">
        <ul>
            <li class="selected"><a href="index.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="contact.html">Contact</a></li>
            <li><a href="support.html">Support</a></li>
            <li><a href="faqs.html">FAQs</a></li>
            <li><a href="events.html">Events</a></li>

        </ul>
    </div>
    <h1>Home</h1>
    <p>This is the home page.</p>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/app.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
* {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

body {
    background: #fff;
}

#menu {
    background: #384047;
    height: 60px;
    padding: 0 5px 0;
    text-align: center;
}

ul {
    list-style: none;
}

ul li {
    display: inline-block;
    width: 84px;
    text-align: center;
}

ul li a {
    color: #fff;
    width: 100%;
    line-height: 60px;
    text-decoration: none;
}

ul li.selected {
    background: #fff;
}

ul li.selected a {
    color: #384047;
}

select {
    width: 84%;
    margin: 11px  0 11px 2%;
    float: left;
}

button {
    display: inline-block;
    line-height: 18px;
    padding: 0 5px;
    margin: 11px 2% 11px 0;
    float: right;
    width: 10%;
}
h1 {
    margin: 40px 0 10px;
    text-align: center;
    color: #384047;
}
p {
    text-align: center;
    color: #777;
}

//Modify CSS to hide links on small widths and show button and select
    //Also hides select and button on larger widths and shows links

@media (min-width: 320px) and (max-width: 568px) {

#menu ul {
    display:none;
}

}

@media (min-width: 568px){
    #menu select, #menu button {
        display:none;
    }
}

Seems to be something with the pixel min and max. When you replace the #menu select, #menu button with #menu ul it works.

This oddly doesn't hide the menu

@media (max-width: 568px) {

#menu ul {
    display:none;
}

}

@media (min-width: 568px) {
#menu select, #menu button {
        display:none;
    }
}

But this does, lol.

@media (min-width: 568px) {
#menu select, #menu button, #menu ul {
        display:none;
    }
}

I'm totally stumped. Why would min work fine and max not?

Zachary Fine
Zachary Fine
10,110 Points

Try clearning your cache