Help! I've noticed a strange issue where text is overlapping in my sidebar. Check out the image here.
I can't seem to figure out why this is happening. Strangely, the overlap disappears when I hover over the item. Here's the HTML for my sidebar:
<!-- Sidebar Menu -->
<div ng-controller="SidebarController">
<ul class="nav sidebar-menu" ng-repeat="comp in competition track by $index" id="rcs-menu-item">
<li ui-sref-active="active" >
<a href="javascript:void(0)" id="{{comp.competitionID}}" ng-click="getTeams(comp.competitionID, comp.Name, comp.calenderID, comp.customName)">
<i class="menu-icon fa fa-soccer-ball-o"></i>
<span class="menu-text">{{comp.Name}}</span>
</a>
</li>
</ul>
</div>
<!-- /Sidebar Menu -->
If anyone has any suggestions on how to fix this, please let me know!