I've created a simple responsive menu - here is a slim version:
[JsFiddle Here](https://jsfiddle.net/f0rewbm2/1/)

HTML

```
<a href="javascript:void(0);" onclick="toggleNav()">
<span class="ico"><i class="fa fa-bars hvr-icon"></i></span> Dashboard
</a><ul id="submenu">
<li>Example Menu</li>
<li>Example Menu 2</li>
<li>Example Menu 3</li>
</ul>

```

JavaScript

```
function toggleNav() {
    $("#submenu").toggle();
}

```

CSS

```
#submenu {
  display:none;
}

```

I use jQuery to toggle() the display.

If I toggle the `submenu` to display, I would like to hide it again responsively (Eg without clicking the toggle button) when the screen size increases using a media query such as:

```
@media screen and (max-width: 991px) {

```

However, any CSS styles are overridden by the inline styles that toggle() writes.

Can anybody suggest a way of achieving this?

Thanks.