Help me resolve this menu issue, and to add/change the animate effect below 767px

JavaScript
1

Hi, I just started working on a little site for my stepfather and his small building company. http://www.rosens-bygg.se/

But i got some issues i need to resolve.

In firefox when u change the browser window down to when the menu changes to a drop down style. When i click the menuicon the menu shows but at the end of the “animation” the menu “bumps” up making the first menu item partly hidden under the menuicon. Ive only tried in Chrome and Firefox, and in chrome it doesnt seem to do this.

Another thing i would like to do is to change the animation so after the menu changes to “Not inline” it animates from top to bottom, not as it is now when the whole menu shows instantly then the items slide in from left like they to on “desktop screen size”.

I would also like to know how i can make the menu collapse down to the menuicon when on small screen sizes, so that u have to click the icon before it shows.

Can this be done with only one menu, or do i need two menus? one for small screens and one for bigger screens?

Hope someone understand what i want to accomplish, my english isnt perfect:P

Here is some code:

<nav>
			<div class="container row">
				<ul class="block-12 col menu">
					<h2 id="menu_btn">
						<span aria-hidden="true" data-icon="&#9776;"></span>
						<span class="menushow">M</span>
					</h2>
					<li class="link"><a href="index.php">Startsida</a></li>
					<li class="link"><a href="galleri.php">Galleri</a></li>
					<li class="link"><a href="news.php">Nyheter</a></li>
					<li class="link"><a href="contact.php">Kontakt</a></li>
				</ul>
			</div>
		</nav>

<script type="text/javascript">
			//menu btn is the trigger
			$("#menu_btn").click(function() {
				    
				$('.link').animate({width: 'toggle'}, 500,
				   function() {
				   // Animation complete.
				                  
				});
			});
		</script>

thanks in advance.