Jump to content
Sign in to follow this  
jacallea

Changing color of parent item when submenu is hovered over.

Recommended Posts

jacallea

Hi there, I wish to change the colour of the parent item when the submenu related to it is hovered. Currently, when I hover over the submenu, it's colour changes but not it's parent. I have used the following css .main_nav ul.sf-menu li.menu-item a:hover {background: #1c3260 !important;} Thanks in advance...

Share this post


Link to post
Share on other sites
jacallea

Thanks for response kastelic. My site is currently just on my local computer to be transfered online later. I'm not sure if this is really a site specific thing. I just want to know how to target the parent of an submenu item when you hover over the submenu item. I know li.current-menu-parent works to target the parent when the submenu is actually selected, but I wish to target the parent when the submenu is hovered. Thanks again....

Share this post


Link to post
Share on other sites
catrina

I think this is something that needs to be done with Javascript, not CSS. It's further explained here: http://www.sitepoint.com/forums/4924289-post8.html It's something that needs to be adjusted in the superfish javascript code (located inside the theme folder files), but I'm not too certain exactly what needs to be done.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
jacallea

Thanks for that Catrina. I will leave this unanswered to see if anyone can provide further guidance....

Share this post


Link to post
Share on other sites
catrina

I've come across some fixes with CSS strewn all on various other places, but I'm not sure if they would work.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
jacallea

Are you able to elaborate please Catrina? Thanks...

Share this post


Link to post
Share on other sites
Kate

Hi jacallea, We actually already have the JS in place, as well as the CSS class that's generated ;) It may have been overwritten with some custom code you added. But, here it is again to add to your CSS:

.sfHover{background:#dddddd !important;}

Replace "#dddddd" with the hex value you want for you color.

Share this post


Link to post
Share on other sites
jacallea

Perfect Kate. Legend! Can I be a pain and ask if there is a reference that you use regarding the css for the menus as I am finding it a tad confusing? I have searched the net and struggled to find something that I understand. Thanks Catrina and Kate. Very much appreciated :-)

Share this post


Link to post
Share on other sites
jacallea

Hi guys... I found the best way to control this was to use the following code: .main_nav ul li:hover a {color: white !important;} .main_nav ul li:hover li a {color: #1c3260 !important;} .main_nav ul li:hover li a:hover {color: white !important;} Cheers...

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×