tim-m of Mile High Themes
5/3/2017 - 7:55 PM

Account icon on mobile view

Account icon on mobile view

<a href="#" class="visible-ms visible-xs pull-right navbar-cart" id="wsnavtoggle"><div class="cart-icon"><i class="fa fa-bars"></i></div></a>
    <!--Put this code between this icons  -->  
      {% if shop.customer_accounts_enabled %}
      <li class="dropdown-grid no-open-arrow visible-ms visible-xs account-icon-mobile">
        <a data-toggle="dropdown" href="javascript:;" class="dropdown-toggle navbar-cart" aria-expanded="true"><span class="icons"><i class="fa fa-user"></i></span></a>
        <div class="dropdown-grid-wrapper mobile-grid-wrapper">
          <div class="dropdown-menu no-padding animated fadeInDown col-xs-12 col-sm-5" role="menu">
            {% include 'menu-account' %}
          </div>
        </div>
      </li>
      {% endif %}
    <!--end code-->
<a href="javascript:void(0);" data-href="/cart" class="visible-ms visible-xs pull-right navbar-cart cart-popup"><div class="cart-icon"><span class="count{% if cart.item_count < 1 %} hidden{% endif %}">{{ cart.item_count }}</span><i class="fa fa-shopping-cart"></i></div></a>
<a href="#" class="visible-ms visible-xs pull-right navbar-cart" id="wsnavtoggle"><div class="cart-icon"><i class="fa fa-bars"></i></div></a>
  <!--Put this code between this icons  -->
    {% if shop.customer_accounts_enabled %}
    <li class="dropdown-grid no-open-arrow visible-ms visible-xs account-icon-mobile">
      <a data-toggle="dropdown" href="javascript:;" class="dropdown-toggle navbar-cart" aria-expanded="true"><span class="icons"><i class="fa fa-user"></i></span></a>
      <div class="dropdown-grid-wrapper mobile-grid-wrapper">
        <div class="dropdown-menu no-padding animated fadeInDown col-xs-12 col-sm-5" role="menu">
          {% include 'menu-account' %}
        </div>
      </div>
    </li>
    {% endif %}
    <!--end code-->
<a href="javascript:void(0);" data-href="/cart" class="visible-ms visible-xs pull-right navbar-cart cart-popup"><div class="cart-icon"><span class="count{% if cart.item_count < 1 %} hidden{% endif %}">{{ cart.item_count }}</span><i class="fa fa-shopping-cart"></i></div></a>
 /*Put this code to style.css*/
 @media (min-width: 768px){
  .mobile-grid-wrapper .dropdown-menu{
    left: auto;
  }
}
@media (max-width: 768px){
  .mobile-grid-wrapper{
    direction: rtl;
    float: right;
  }
  .account-icon-mobile{
    float: right;
    padding: 15px 5px; 
  }
  .navbar-header>li.account-icon-mobile.open>.dropdown-grid-wrapper>.dropdown-menu{
    display: block;
    right: auto;
    direction: ltr; 
  }
  .navbar-header{
    z-index: 3 !important; 
  }
}
@media (max-width: 360px){
  #header .navbar-brand > img {
    max-width: 130px !important;
  }
  #header a.text-logo {
    padding-right:10px
  }
}