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

Bradley White
Bradley White
21,285 Points
Posted by 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,704 Points
Gleb Vorobjev
Gleb Vorobjev
13,704 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
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,178 Points
Valentin Fezza
Valentin Fezza
18,178 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
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?

Andrew Scherer
Andrew Scherer
3,942 Points
Andrew Scherer
Andrew Scherer
3,942 Points

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;
    }
}
Andrew Scherer
Andrew Scherer
3,942 Points
Andrew Scherer
Andrew Scherer
3,942 Points

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

Andrew Scherer
Andrew Scherer
3,942 Points
Andrew Scherer
Andrew Scherer
3,942 Points

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
Zachary Fine
Zachary Fine
10,110 Points

Try clearning your cache