Change menu item on hover
-
Hi Loving your theme, perfect for my needs. I am just trying to change menu currently so that a different image is displayed when on the current page pertaining to menu item. I have managed to get a hover but its all off centre. I was just wondering how you are declaring your current page item?
Here is a link to the site: http://kg.harryrook.webfactional.com/
thanks for any help in advance
All the best
Harry
-
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(‘http://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="http://kg.harryrook.webfactional.com/about/"><img width="179" height="53" src="http://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?
- The topic ‘Change menu item on hover’ is closed to new replies.