Mimic Bootstrap menu functionality

Question

Hello I got a question where I need some guidance/help with creating a menu which is replaced with a button if the screen is too small to show the original menu. I know that Bootstrap does this for you but due to implementation restrictions I can not use that library. Therefore I looked at the functionality of Bootstrap and I tried to mimic but I still need some help finalizing it.

I have the following HTML code:

<div class="navbar navbar-default main-nav">
    <div class="container">
        <div class="navbar-header" tabindex="-1">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mobile-nav" aria-expanded="false">
              <span class="sr-only">Mobile navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse" tabindex="-1">
            <div class="nav navbar-nav" tabindex="-1">
                <div class="menuitem_wrapper" tabindex="-1">
                    <a class="home_button not_active" href="#"></a>
                    <div class="dropdown-menu" tabindex="-1">
                        <a href="#">My data</a>
                    </div>
                </div>
                <div class="menuitem_wrapper" tabindex="-1">
                    <a href="#">Menu 1</a>
                    <div class="dropdown-menu" tabindex="-1">
                        <a href="#">Submenu1</a>
                        <a href="#">Submenu2</a>
                    </div>
                </div>
                <div class="menuitem_wrapper" tabindex="-1">
                    <a class="active" href="#">Menu 2</a>
                    <div class="dropdown-menu" tabindex="-1">
                        <a href="#">submenu1</a>
                        <a href="#">submenu2</a>
                    </div>
                </div>
                <a href="#">FAQ</a>
                <a href="#">Contact</a>
                <a href="#">Logout</a></div>
        </div>
    </div>
</div>

Which can be seen here: JSFIDDLE. Now whenever you resize your screen a button appears and whenever you click on it the menu is created vertically instead of horizontally.

This works perfect but what do I have to do when I resize the screen to large screen size (I use media queries) and I want to reset the current vertical implementation to the original horizontal implementation.

As I said earlier I use media queries to show/hide the button:

/* Media Queries */
@media (min-width: 768px) {
    .container {
        width: 750px;
    }
    .navbar {
        border-radius: 0;
    }
    .container>.navbar-header {
        margin-right: 0;
        margin-left: 0;
    }
    .navbar-header {
        float: left;
    }
    .navbar-toggle {
        display: none;
    }
    .container>.navbar-collapse {
        margin-right: 0;
        margin-left: 0;
    }
    .navbar-collapse.collapse {
        display: block !important;
        height: auto !important;
        padding-bottom: 0;
        overflow: visible !important;
    }
    .navbar-collapse {
        width: auto;
        border-top: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

}

Answer 1

Firstly, this is a terrible way to create a menu.

But here's a fix, add another @media query for the max-width:

@media (max-width:768px) {
.show-menu .navbar-nav a, .show-menu .menuitem_wrapper {
  width:100%;
}
  .show-menu {
        display: block !important;
}
}

Edit: Also change addClass to toggleClass -

$(".navbar-collapse").toggleClass('show-menu');