Title: Icon Hover Options & Responsive Layout Last modified: August 22, 2016 --- # Icon Hover Options & Responsive Layout * Resolved [alextynemouth](https://wordpress.org/support/users/alextynemouth/) * (@alextynemouth) * [11 years, 9 months ago](https://wordpress.org/support/topic/icon-hover-options-responsive-layout/) * Hi, * First off i want to say i love this plugin. Came across it only recently but i know i’ll be using it in future. * Got a couple of questions though which i’m hoping you can help resolve. * 1) Is there a way to show a different icon when hovering? I have an icon in the menu currently and when i hover i want to show a different coloured icon. The same icon, just a different colour so people can see what they are hovering on or what page they are active on. * 2) Is there a way to disable the icons for tablets and mobiles? * Thanks in advance! * [https://wordpress.org/plugins/menu-icons/](https://wordpress.org/plugins/menu-icons/) Viewing 9 replies - 1 through 9 (of 9 total) * [Dzikri Aziz](https://wordpress.org/support/users/kucrut/) * (@kucrut) * [11 years, 9 months ago](https://wordpress.org/support/topic/icon-hover-options-responsive-layout/#post-5226330) * Hi Alex, * As of now, the plugin doesn’t support these features yet, and you will need to modify your theme’s stylesheet or use the [Simple Custom CSS plugin](http://wordpress.org/plugins/simple-custom-css/). I’m planning on adding these features for the next updates, just not sure when I’ll have the time for it yet. * Thread Starter [alextynemouth](https://wordpress.org/support/users/alextynemouth/) * (@alextynemouth) * [11 years, 9 months ago](https://wordpress.org/support/topic/icon-hover-options-responsive-layout/#post-5226331) * Hi Dzikri, * Thanks for the speedy reply! * Could you point me in the direction i’d need to look to alter the icons when hovering. I’ve tried doing CSS already and can’t seem to get it to work. Any links to articles you would recommend? * Thanks! * [Dzikri Aziz](https://wordpress.org/support/users/kucrut/) * (@kucrut) * [11 years, 9 months ago](https://wordpress.org/support/topic/icon-hover-options-responsive-layout/#post-5226340) * I recorded a quick video _just for you_ 🙂 * Thread Starter [alextynemouth](https://wordpress.org/support/users/alextynemouth/) * (@alextynemouth) * [11 years, 9 months ago](https://wordpress.org/support/topic/icon-hover-options-responsive-layout/#post-5226342) * Love it! * However…….I’m using a custom image. * So basically i’ll be swapping out for a different image. If that makes sense. Not sure if changing the colour would work. * Legend for making a video! * Got one for custom images and how to swap them on hover 😉 * [Dzikri Aziz](https://wordpress.org/support/users/kucrut/) * (@kucrut) * [11 years, 9 months ago](https://wordpress.org/support/topic/icon-hover-options-responsive-layout/#post-5226343) * It’s much more complicated for custom images. I’ve already added this to my to- do list for the next plugin updates. * Thread Starter [alextynemouth](https://wordpress.org/support/users/alextynemouth/) * (@alextynemouth) * [11 years, 9 months ago](https://wordpress.org/support/topic/icon-hover-options-responsive-layout/#post-5226344) * Ha. I guessed as much. * What i’ve managed to do as a workaround thus far is upload a transparent PNG with nothing in it to create the menu icon space. * Then ive defined background images similar to how you did on that video. * ``` #menu-item-79 a { width: 24.2px; height: 75px; display: block; background-image: url('/menu_home.png'); background-repeat:no-repeat; background-position: left top; margin-left:30px; margin-right:30px; } #menu-item-79 a:active { width: 24.2px; height: 75px; display: block; background-image: url('/menu_home.png'); background-repeat:no-repeat; background-position: right top; margin-left:30px; margin-right:30px; } #menu-item-79 a:hover { width: 24.2px; height: 75px; display: block; background-image: url('/menu_home.png'); background-repeat:no-repeat; background-position: right top; margin-left:30px; margin-right:30px; } ``` * Im playing with the margins and trying to get the icon to be coloured when the page is active at the moment. Its proving to be difficult. * Thread Starter [alextynemouth](https://wordpress.org/support/users/alextynemouth/) * (@alextynemouth) * [11 years, 9 months ago](https://wordpress.org/support/topic/icon-hover-options-responsive-layout/#post-5226345) * It works on Desktop however they are a bit off on mobile view. Which is why ideally id just disable the icons on the mobile view. * Thread Starter [alextynemouth](https://wordpress.org/support/users/alextynemouth/) * (@alextynemouth) * [11 years, 9 months ago](https://wordpress.org/support/topic/icon-hover-options-responsive-layout/#post-5226378) * Any idea on when the plugin update will be by the way? * Just so i can keep an eye out. * [Dzikri Aziz](https://wordpress.org/support/users/kucrut/) * (@kucrut) * [11 years, 9 months ago](https://wordpress.org/support/topic/icon-hover-options-responsive-layout/#post-5226441) * The css sprite feature would need some time to develop, so I can’t really give you an estimation. I’d be sure to spend some of my free time adding this feature though. Viewing 9 replies - 1 through 9 (of 9 total) The topic ‘Icon Hover Options & Responsive Layout’ is closed to new replies. * ![](https://ps.w.org/menu-icons/assets/icon-128x128.png?rev=2526860) * [Menu Icons by Themeisle – Add Icons to Navigation Menus](https://wordpress.org/plugins/menu-icons/) * [Frequently Asked Questions](https://wordpress.org/plugins/menu-icons/#faq) * [Support Threads](https://wordpress.org/support/plugin/menu-icons/) * [Active Topics](https://wordpress.org/support/plugin/menu-icons/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/menu-icons/unresolved/) * [Reviews](https://wordpress.org/support/plugin/menu-icons/reviews/) * 9 replies * 2 participants * Last reply from: [Dzikri Aziz](https://wordpress.org/support/users/kucrut/) * Last activity: [11 years, 9 months ago](https://wordpress.org/support/topic/icon-hover-options-responsive-layout/#post-5226441) * Status: resolved