Well I answered my own question.
It may be designed that way purposely, I don't know, but for devices that require hand and eye coordination like mobiles, any hint like this is welcomed plus, so I made a few changes and wrote some lines of CSS code to achieve that
1)-->FIRST:
in ~\Nop.Web\Themes\...\Content\css\mobile-only.css
starting at line:
13-25 under /* HEADER */
CHANGED ALL THE BACKGROUND IMG (M-ICON) INSTANCES FOR THE TOGGLE ICON IMG ONES AND ADDED A Y-COORDINATE VALUE OF -18PX FOR POSITION CONTROL
(i.e.)
background: url(../img/m-icon-plus.png) no-repeat center; --> background: url(../img/icon-plus.png) no-repeat center -18px;
2)-->WROTE A NEW CLASS .HEADER-LINKS .A:HOVER FOR EVERY INSTANCE OF THE HEADER-LINKS, AND ADDED THE SAME TOGGLE BACKGROUND IMG BUT WITH A ALTERED VALUE OF 10PX FOR TOGGLE IMG POSITION TRANSITIONING CONTROL
(i.e.)
.header-links .ico-register:hover {
background: url(../img/icon-plus.png) no-repeat center 10px;
}
This is it!
PS. alternatively add titles to the html tags in HeaderLinks.cshtml
like:
<li><a href="@Url.RouteUrl("Logout")" class="ico-logout" title="Logout">@T("Account.Logout")</a></li>
I didn't wanted to spent time figuring things out rather working on the meat of the site: categories and products but I see that you guys are busy
Thank you