Icon Hover Options & Responsive Layout

Resolved alextynemouth
(@alextynemouth)

11 years, 9 months ago

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://ww.wp.xz.cn/plugins/menu-icons/

Viewing 9 replies - 1 through 9 (of 9 total)

Dzikri Aziz
(@kucrut)

11 years, 9 months ago

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. 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
(@alextynemouth)

11 years, 9 months ago

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
(@kucrut)

11 years, 9 months ago

I recorded a quick video just for you 🙂

Thread Starter alextynemouth
(@alextynemouth)

11 years, 9 months ago

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
(@kucrut)

11 years, 9 months ago

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
(@alextynemouth)

11 years, 9 months ago
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
(@alextynemouth)

11 years, 9 months ago

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
(@alextynemouth)

11 years, 9 months ago

Any idea on when the plugin update will be by the way?

Just so i can keep an eye out.

Dzikri Aziz
(@kucrut)

11 years, 9 months ago

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.