导航栏消失在手机屏幕宽度以下

Question

I created a responsive navbar but here it's the problem,when i go into mobile width and open and close navbar ,and then i resize to the normal width,the navbar isn't there anymore and i have to refresh to make it show up again. I used jQuery to toggle a class that animates between display:block and display:none and when i open and close the navbar then i resize to full width i think it remains to display:none. How can i fix this ?

Here is the code :

HTML:

    <header>                             
        <div class="menu-trigger">
            <span class="bar"></span>
            <span class="bar"></span>
            <span class="bar"></span>
        </div>
        <nav id="index-nav">
            <ul>
                <li><a id="active" href="index.html">HOME</a></li>
                <li><a href="collection.html">COLLEZIONI</a></li>
                <li><a href="events.html">EVENTI</a></li>
                <li><a href="contact.php">CONTATTACI</a></li>
                <li><a href="about.html">ABOUT</a></li>
                <li><a href="colaborations.html">COLLABORAZIONI</a></li>
            </ul>
        </nav>
    </header>

CSS:

#index-nav{
    background-color: rgba(0, 0, 0, 0.2);
    width:100%;
    text-align:center;
    position:absolute;
    display:block;
}

#index-nav ul {
    margin:0;
    font-size:13px;
    font-style:italic;
    overflow: hidden; 
}

#index-nav ul li{
    list-style:none;
    display:inline-flex;
    padding:10px 4%;   
}

@media (max-width:980px) {

        .showing {
            display: block;
        }
        #index-nav{
            background-color:none;
            background : #FFF;
            display: none;
            border-bottom: 0;
            position:relative;               
        }

        #index-nav ul li a{
             color:black;
        }
}

jQuery:

$(document).ready(function () {

    $('.menu-trigger').on('click', function () {
        $("#index-nav").slideToggle(400, function () {
            $(this).toggleClass('showing').css('display',' ');
        });
    });
});

Answer 1

You've got a typo there - you should remove the space when setting the display to '':

Instead of .css('display',' '); use .css('display', '');