Close

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

ehubcap-2364450-2364450
12 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-2364450-2364450
12 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