This button does not toggle back in - html

Question

I am working on this site: http://www.u401769.gluweb.nl/
I have a problem with the toggle menu when you view the site on mobile size. When you toggle it out and back in the cart button keeps being visible.
This is the code for the content that is toggled. The button in the end is the button that does not toggle back in.
<div class="navbar-collapse collapse in" id="bs-example-navbar-collapse-1" aria-expanded="true">
<div class="menu-hoofdmenu-container">
<ul class="social_media">
<li><img src="wp-content/themes/fairphone/img/social_icon_01.png">
</li>
<li>
<img src="wp-content/themes/fairphone/img/social_icon_02.png">
</li>
<li>
<img src="wp-content/themes/fairphone/img/social_icon_03.png">
</li>
<li>
<img src="wp-content/themes/fairphone/img/social_icon_04.png">
</li>
</ul>
<button type="button" class="shopping-cart">
</button>
</div>
and the button that toggles the menu:
<button type="button" class="navbar-toggle menu-toggle" aria-controls="primary-menu" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="true">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
I hope someone is able to help me. Thank you in advance.

Answer 1

I fixed this with css as following:
first you need to add display:none to the cart button, so its style will be like this :
.shopping-cart {
background-image: url('img/shop_icon.png');
background-repeat: no-repeat;
background-position: center;
margin: 15px;
float: right;
background-color: #00a4de;
border: none;
box-shadow: none;
padding: 12px 25px;
display: none;
}
then we will add style to make it visible when the menu is toggled down :
.main-navigation.toggled .shopping-cart {
display: block;
}
and finally we will add the following style to yours to make the button always visible when the width of screen is bigger than 769px :
#media screen and (min-width: 768px) {
.shopping-cart{
display:block;
}
}