- This topic has 6 replies, 2 voices, and was last updated 11 years, 1 month ago by
.
-
Posts
-
I have a:hover effect on primary navigation links to change color of the text. But I like to remove hover effect for mobile devices since you have to click twice on navigation links on iPhone etc.
:hover works fine on desktop browsers, but fails to function on iOS touch devices … Any guidance is much appreciated.
here is the code I have;
/* Primary Navigation
--------------------------------------------- */
.nav-primary .wrap {
border: none;
}
.nav-primary a:hover,
.nav-primary .current-menu-item > a,
.nav-primary .sub-menu a:hover,
.nav-primary .sub-menu .current-menu-item > a:hover {
color: #ed702b;
text-decoration:none;
}Hi there
I don't think you can target specific devices (such as phone, tablet etc) with CSS, but you can target devices of a certain width.
Where have you added your code? Is it in the media queries at the bottom of style.css? You could target, say, devices of 600px wide or less and that should do it - for most phones, at least.
Thanks
Dom
Thanks Dom, it is in CCS but not in media section. how can you have a:hover for desktop only and not for phone tablet touch devices in CSS ?
I'm not sure which theme you're using, so this may differ slightly, but in Frameowrk, near the bottom of style.css you'll see:
/*
Media Queries
---------------------------------------*/where all of the device-specific CSS needs to go. Way down at the bottom is:
@media only screen and (max-width: 767px)This is where styling for smaller devices goes (767px is one px narrower than a portrait iPad). You could either put your phone -specific CSS in here, or, if you want to target smaller devices than that, create a new media query, say:
@media only screen and (max-width: 599px) { .nav-primary .wrap { border: none; } .nav-primary a:hover, .nav-primary .current-menu-item > a, .nav-primary .sub-menu a:hover, .nav-primary .sub-menu .current-menu-item > a:hover { color: #ed702b; text-decoration:none; } }Thanks
Dom
Thanks Dom, still the same problem. I added this code to style.css
/* Primary Navigation for desktop --------------------------------------------- */ .nav-primary .wrap { border: none; } .nav-primary a:hover, .nav-primary .current-menu-item > a, .nav-primary .sub-menu a:hover, .nav-primary .sub-menu .current-menu-item > a:hover { color: #ed702b; text-decoration:none; } .nav-primary .sub-menu .current-menu-item > a { color: #fff; } /* remove hover effect from touch devices */ .site-header .current-menu-item > a, .site-header .sub-menu a:hover { .nav-primary .wrap { border: none; } .nav-primary a, .nav-primary .current-menu-item > a, .nav-primary .sub-menu a, .nav-primary .sub-menu .current-menu-item > a{ color: #ed702b; text-decoration:none; } }still you have to tap twice on touch devices. I think it still gets the hover effect from desktop css code.
On iphone you have to tap twice to activate the link (I think 1st. tap triggers :hover, 2nd. tap triggers link).I found this article about it but I do not know how to apply the best solution.
http://stackoverflow.com/questions/2741816/is-it-possible-to-force-ignore-the-hover-pseudoclass-for-iphone-ipad-usersAny other advice appreciated, thanks for your help.
OK, I see. Reading the SO post you linked to, I think this is the order of things. You're going to need to get into your functions.php file, so it'd be good to have ftp access in case you misplace a comma or something and get the white screen of death.
What the commenter on SO seems to be saying is you need to add that script, add a class to <body> and then apply that CSS (although I'm a little unclear as to what he means with the CSS comment). If I understand correctly, this is how I would go about it, but I am a little hazy on adding javascript.
1. Via ftp, go to your child theme folder and create a folder named "lib", then, inside this, create another folder called "js" (this is not essential, but a couple of things I read about inserting other bits of javascript suggest this is a way to keep things neat).
2. Open Notepad or similar and copy this in, save it as something like "nohover.js" and upload it to the js folder you created:
if ('ontouchstart' in document) { Y.one('body').removeClass('no-touch'); }3. Referencing this, and butchering it a little , enqueue your nohover.js by adding this to your functions.php:
// Register no hover script add_action( 'wp_enqueue_scripts', 'PREFIX_enqueue_scripts' ); function PREFIX_enqueue_scripts() { wp_enqueue_script( 'PREFIX-responsive-menu', get_stylesheet_directory_uri() . '/lib/js/nohover.js', array( 'jquery' ), '1.0.0', true ); //change PREFIX to the name of your child theme }(3a - Just a note on this; I believe you could add:
<script type="text/javascript" src="/lib/js/nohover.js"></script>into your <head> through Genesis > Theme Options.)4. Add a class to <body>, as explained here, in functions.php:
//* Add custom body class to the head add_filter( 'body_class', 'sp_body_class' ); function sp_body_class( $classes ) { $classes[] = 'no-touch'; return $classes; }5. Now the final part, which I'm not 100% clear on, is adding the CSS he mentions:
.no-touch my:hover{ color: red; }I think he means to add that above any instance of an a:hover command that you want to overrule (so in .entry a, for example) but I'm not sure.
I hope this sets you on the right path. Don't know how familiar you are with functions.php, but it can be pretty terrifying when you hit save and the screen goes white. Just go in to the file via ftp and remove the code you just added (or double check it to see if I missed out something). Might be an idea to copy your working functions.php somewhere so you can restore the original if necessary.
Good luck.
Thanks
Dom
- The topic ‘remove :hover effect for mobile devices’ is closed to new replies.