Rakesh Singh

Rakesh Singh

  • 1.8k
  • 57
  • 2.9k

How to use menu Icons instead of name while screen is small

Jul 20 2018 12:59 AM
Hi,
Couls you please help me to use menu icons instead of menu name while screen size is small. 
I have written the below code but in this case when I minimize or trying to see in mobile view then all menus i.e. customer view, segment view etc slide right as attched in screenshot
 
 
But I want that in this scenario, icons should come not the menu name. 
 
 
<ul class="nav child_menu">
<li class="parentLi">
<a ui-sref="individual">
<span>Customer View</span>
</a>
</li>
<li class="parentLi">
<a ui-sref="segment">
<span>Segment View</span>
</a>
</li>
<li class="parentLi">
<a ui-sref="merchant">
<span>Merchant View</span>
</a>
</li>
<li class="parentLi">
<a ui-sref="product">
<span>Product View</span>
</a>
</li>
<li class="parentLi">
<a ui-sref="dashboard">
<span>Exec Dashboard</span>
</a>
</li>
</ul>
 
 
For small size CSS is as below:
.nav-sm ul.nav.child_menu {
background: #3e5367 none repeat scroll 0 0;
display: none;
left: 100%;
position: absolute;
top: 0;
width: 210px;
z-index: 4000;
}
 
Please advise.
 
Thanks in advance 
 

Answers (1)