Jquery hiding responsive navigation when increasing browser size

Question

I have a nav bar that hides when the window goes below a certain width. A menu button appears. When the button is toggled to show the menu and then toggled to hide it again and then the window size is increased to the navbar stays hidden. I think the jquery toggle is adding the inline style which is overriding the css

How can I stop this from happening?

$('#responsive_nav_trigger').click(function(){
  $('#top_nav').toggle('fast');
});

@media screen and (min-width: 760px) {
    #top_nav{
        display: inline-block;
    }
}
@media screen and (max-width: 760px) {
    #responsive_nav_trigger{
        display: block;
    }
    #top_nav{
        display: none;
        float: left;
        width: 100%;
        clear: both;
    }
    #top_nav li{
        width: 100%;
        height: 25px;
        font-size: 1em;
        float: left;
        margin: 5px 0;
        padding: 0;
        text-align: center;
    }
}

Answer 1

Please Use

display: inline-block!important;