Skip to content

Instantly share code, notes, and snippets.

@tjmaxwell
Created November 28, 2017 01:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tjmaxwell/41984b9147dd435a74e900545e40c7bb to your computer and use it in GitHub Desktop.
Save tjmaxwell/41984b9147dd435a74e900545e40c7bb to your computer and use it in GitHub Desktop.
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
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment