Title: Mobile responsive menu button is not responding to jquery click function
Tags: javascript;jquery;html;css
Question: I'm currently trying to create a responsive menu button for my navigation bar, and it does not seem to be responding to a mouse click.

```$("span.nav-btn").click(function()
    $("ul.nav-toggle").slidetoggle();
})
```

Fiddle

Comment: `slidetoggle` -> `slideToggle`. Also you're missing a curly brace `{`.


Here is another answer: Your JS has a syntax error. Missing ```{``` at the first line and the method name ```slideToggle``` (with capital "T").

```$("span.nav-btn").click(function() {  // <== HERE ===
  $("ul.nav-toggle").slideToggle();
});
```


Here is another answer: Problems:


The click function is missing an opening curly brace ```{``` 
jQuery is case-sensitive so ```slidetoggle```, should be   ```slideToggle```


Notes


in your fiddle is not loading the jQuery library






```$("span.nav-btn").click(function() {
  $("ul.nav-toggle").slideToggle();
})```
```#nav {
  background-color: #6a5750;
  padding-top: .01%;
  position: fixed;
  width: 100%;
  text-align: center;
}
#nav li {
  display: inline-block;
}
#nav li a {
  text-decoration: none;
  text-align: center;
  font-size: 16px;
  color: #FFFFFF;
  -o-transition: .3s;
  -ms-transitiion: .3s;
  -moz-transition: .3s;
  -webkit-transition: .3s;
  transition: .3s;
}
#nav a:hover {
  color: #FF0000;
}
@media (max-width: 800px) {
  #nav {
    text-align: left;
  }
  #nav li {
    display: block;
  }
  .nav-btn {
    display: block;
    background-color: #6a5750;
    color: #FFFFFF;
    text-align: center;
  }
  .nav-btn:before {
    content: "Menu"
  }
}```
```<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;</script&gt;
<div data-scroll-header id="nav"&gt;
  <span class="nav-btn"&gt;</span&gt;
  <ul class="nav-toggle"&gt;
    <li&gt;<a data-scroll href="#home"&gt;Home</a&gt;
    </li&gt;
    <li&gt;<a data-scroll href="#html"&gt;HTML</a&gt;
    </li&gt;
    <li&gt;<a data-scroll href="#css"&gt;CSS</a&gt;
    </li&gt;
    <li&gt;<a data-scroll href="#video"&gt;Video</a&gt;
    </li&gt;
    <li&gt;<a data-scroll href="#about"&gt;About</a&gt;
    </li&gt;
    <li&gt;<a data-scroll href="#contact"&gt;Contact</a&gt;
    </li&gt;
  </ul&gt;```





{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 2, 'CommentCount': 1, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2016:00:05/18/16', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<javascript><jquery><html><css>', 'Title': 'Mobile responsive menu button is not responding to jquery click function', 'ViewCount': 73, 'id': 37311443, 'user_AboutMe': None, 'user_AccountId': 8470725.0, 'user_DisplayName': 'manjon', 'user_Reputation': 1.0, 'user_Views': 1.0, 'user_id': 6353427.0}}