shopify bootstrap 3 navbar-right collapse issues - twitter-bootstrap-3

Question

I was designing a web in shopify and trying to using bootstrap navbar, but the navbar-right was not collapsing correctly, the right navbar should collapse under the main manu, but it appears at the right of the main manu
The navbar-right collapse like this
Here is my code
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Shancha</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-left en-nav-li">
<li>HOME</li>
<li>OUR STORY</li>
<li>PRODUCTS</li>
<li>BEAUTY OF CAMELLIA</li>
<li>MEMBERSHIP</li>
<li>EXPLORER</li>
<li>HEALTHY RECIPES</li>
<li>CONTACT US</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
{% if shop.customer_accounts_enabled %}
{% if customer %}
<span class="glyphicon glyphicon-user"></span>
{% else %}
<span class="glyphicon glyphicon-user"></span>
{% endif %}
{% endif %}
</li>
<li>
<a href="/cart" >
{% include 'icon-cart' %}
<span class="visually-hidden">{{ 'layout.cart.title' | t }}</span>
<span class="icon__fallback-text">{{ 'layout.cart.title' | t }}</span>
{% if cart.item_count > 0 %}
<div id="CartCount" class="site-header__cart-count">
<span>{{ cart.item_count }}</span>
<span class="icon__fallback-text medium-up--hide">{{ 'layout.cart.items_count' | t: count: cart.item_count }}</span>
</div>
{% endif %}
</a>
</li>
</ul>
</div>