Here's my code:
HTML:

```
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Responsive Menu</title>
    <link rel="stylesheet" href="css/colors.css"/>
    <link rel="stylesheet" href="css/font-awesome.css"/>
</head>
<body>
<header id="topbar">
    <p>Some title</p>

    <nav class="menu">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Work</a></li>
            <li><a href="#">Contact Me</a></li>
        </ul>
    </nav>

    <div class="nav-trigger">
        <span><i class="fa fa-bars fa-2x"></i></span>
    </div>

    <nav class="mobile-menu-enabler">
        <span></span>
    </nav>
</header>

<nav class="mobile-menu">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">Contact Me</a></li>
    </ul>
</nav>

<!-- Begin main sample site content -->
<div id="wrapper">
    <p>Lorem ipsum dolor set amet...</p>
</div>

<script src="js/jquery-2.1.3.js"></script>
<script src="js/script.js"></script>
</body>
</html>

```

CSS:

```
body {
    font-family: "Ludica Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
}

p {
    margin: 0;
    padding: 0;
    display: inline-block;
}

header {
    margin: 0;
    padding: 0;
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    background-color: azure;
    border: 1px solid black;
    width: 100%;
}

/* Begin Menu Code */
.menu {
    display: inline-block;
    float: right;
}

.menu ul {
    list-style: none;
    margin: 5px 0;
}

.menu ul:last-child {
    margin-right: 10px;
}

.menu ul li {
    display: inline-block;
    margin: 0 2px;
    padding: 0;
    border: 1px solid black;
}

.menu ul li a {
    text-decoration: none;
    color: black;
    padding: 3px;
}

.menu ul li>:hover {
    background-color:black;
    color: white;
}
/* End Menu Code */

/* Mobile Menu Begin */
.mobile-menu-enabler {
    display: none;
    background-color: aqua;
}

.mobile-menu {
    display: none;
    position: relative;
    top: 38px;
    width: 100%;
    border-top: 1px solid black;
}

.mobile-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-menu ul li {
    margin: 0;
    padding: 0;
    border: 1px solid black;
    border-top: 1px solid transparent;
    text-align: center;
}

.mobile-menu ul li a {
    margin: 0;
    padding: 0;
    text-decoration: none;
    color: black;
}

.mobile-menu ul li:hover {
    background-color: darkkhaki;
}
/* Mobile Menu End */

/* Mobile Trigger Button */
.nav-trigger {
    display: none;
    text-transform: uppercase;
    color: black;
    background-color: transparent;
    margin-right: 10px;
    padding: 0;
    text-align: center;
}

.nav-trigger:hover {
    color: red;
    background-color: transparent;
}
/* End Mobile Trigger Button */

/* Dummy wrapper stuff */
#wrapper {
    clear: both;
    display: inline-block;
    position: relative;
}
/* End Dummy wrapper stuff */

@media screen and (max-width: 900px) {
    .menu {
        display: none;
    }

    .mobile-menu-enabler {
        display: block;
    }

    .nav-trigger {
        display: inline-block;
        float: right;
    }

    /*.mobile-menu {*/
        /*display: block;*/
    /*}*/
}

```

JavaScript:

```
$(document).ready(function(){ // Begin document ready function
    var headerHeight = $("#topbar").height();

    $(".nav-trigger").click(function() {
        $(".mobile-menu").slideToggle(400)
    });

    $(".mobile-menu").css("top", headerHeight);

    $("#wrapper").css("top", headerHeight);
}); // End document ready function

```

When the page loads I have a top header bar which contains dummy links. When the browser width is shrunk below the breakpoint at 900px the responsive menu kicks in, at this point upon clicking on the "3 bars icon" the dropdown menu appears as expected.

However, if I were to resize the screen back to full size without first closing the drop down menu, it continues to stay even after the browser is fully expanded.

How can I make the drop-down menu to automatically "untoggle" at the point of growing wider than the breakpoint of 900px?

Thanks

EDIT: Screenshots:
![First image](https://i.stack.imgur.com/CMemR.jpg)

![Second image](https://i.stack.imgur.com/4qFwg.jpg)

![Third image](https://i.stack.imgur.com/VEc2B.jpg)

![Fourth image](https://i.stack.imgur.com/5Fub2.png)

Here's how I'd like it to behave: 
[callmenick.com/lab-demos/10-simple-responsive-navigation](http://callmenick.com/lab-demos/10-simple-responsive-navigation/) 
When the mobile navigation is fully expanded, it automatically slides up once the browser window is expanded