Hide and Show Nav Bar

Question

This is what my nav bar looks like on a mobile screen:

NOTE: I know that the other content is not responsive. I am only working on nav bar at the moment.

Okay so the code that the nav bar has is: -> code in stylus!!!

.nav
    display flex
    align-items center
    justify-content flex-end
    padding 1em
    background #232323
    position fixed
    top 0
    left 0
    width 100%
    z-index 5

    .nav-item
        list-style none
        display inline
        padding 1em

        a
            text-decoration none
            color #f7f7f7
            transition 1s
            padding-right 1em

        a:hover
            text-decoration underline

And also:

@media (max-width: 370px)
    .nav .nav-item a
        padding-right 0
        display block
        font-weight bold
        text-transform uppercase
        letter-spacing 0.1em
        line-height 2em
        height 2em
        border-bottom 1px solid #383838

    .nav .nav-item a:hover
        text-decoration none
        color #444

Now the nav bar is sticky so I can't have it open all the time or the half the screen will be cut off. So how do I make it from what I got to being able to show and hide it?

Answer 1

--snip--

EDIT

Earlier I was confused why this didn't work in jQuery newer than 1.8 but I fixed it so it works up to the latest

//NEW Code- works up to the latest jQuery
$(document).ready(function(){
$("#nav2").hide();
    $("#nav_button2").click(function(){
    $("#nav2").toggle('fast');
    });
});

//Original Code - works only up to 1.8.3
jQuery(document).ready(function(){
    jQuery('#nav').hide();
    jQuery('#nav_button').live('click', function(event) {    
    jQuery('#nav').toggle('fast');
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- NEW -->
<input type='button' id='nav_button2' value='Navigation'>
<div id='nav2'>NAV CONTENT</div>
    
</br></br></br></br>    

<!-- OLD -->
<input type='button' id='nav_button' value='Navigation'>
<div id='nav'>NAV CONTENT</div>

https://jsfiddle.net/