Close

header-links icons aren't rolling down on hover @ mode 480, 768 and (980 portrait)

ehubcap
10 years ago
#4280 Quote
Avatar
  • 43
This nice effect is important for customer experience but more distinguished and helpful on small screens, however the action is not triggering on these modes
Thank you
ehubcap
10 years ago
#4292 Quote
Avatar
  • 43
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