Change menu item on hover

Hi Harry,
Wow, I love what you did with the theme. It looks really good.

I think that instead of having images in the menu, you should have these as background images in the CSS and then you can apply the hover.

When I visited your site just now, I couldn’t see any hover state.
I hadn’t considered that images would be used for navigation.
I see that in your CSS, you have :
.main-navigation.menu-main-container.menu li.menu-item-60:hover{
background-image:url(‘https://kg.harryrook.webfactional.com/wp-content/uploads/2014/07/home-3-active.jpg’);
}
You can also specify the background position.

Have you considered using a google font instead? It might be easier to use a handwriting font than images.

Hi Christine

Thank you for getting back to me, your theme has been great to work with thus far. My apologies I mis-titled this question, I meant to ask how to change the image for the current page item, for example when a user clicks on the about page, when it loads the word about would change to another image(like pastel blue for example).

In other themes like twenty twelve there is a CSS class for the current page menu item, usually called .currrent-page-item, I can’t seem to find this on your site, so I was wondering how you are declaring what the current page item is?

Thanks for getting back to me

All the best

Harry

p.s.I really want to use a font, but feel that it wouldn’t give the right look to the site.

Hi Harry,

That same class is applied here.
If you look at the HTML source code, you can see this on the about page:

<li id="menu-item-61" class="about-men menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-47 current_page_item menu-item-61 has-image"><a href="https://kg.harryrook.webfactional.com/about/"><img width="179" height="53" src="https://kg.harryrook.webfactional.com/wp-content/uploads/2014/06/about-3.jpg" class="attachment-full wp-post-image" alt="About" title="About" /></a></li>

The li has a bunch of classes you can use, so current_page_item or current-menu-item would work.

Ha how right you are, terribly sorry, not sure how I missed that.

Thanks for all your help and a great theme.

All the best

Harry

No need to be sorry… We’ve all been there.
Glad you like the theme.

Cheers

Hi Christine Rondeau & Rookdesigns,
I just read your post and I saw your website kg.harryrook.webfactional.com/

It’s exactly what I want to do with Water Lily theme: when I click on a picture, I would like to have a light box

My website is alinediot.com/

Please, can you explain to me how do you do to change the default click and have the picture directly instead of the article ?

Thanks,

Cheers

Hi @niigaki,

When I look at your site, I’m seeing a carousel that is quite similar to Harry’s site.
Did you find the required plugin that allows you to do that?