Customizing Woothemes Artificer Need to Deactivate a:hover Element

Resolved kmolinanauert
(@kmolinanauert)

11 years, 5 months ago

Here’s the site: http://www.reveljewelrydesign.com/

I’m a bona fide novice, and I’ve been able to customize the CSS of this theme fairly well, except for this annoying (but probably simple) bit of code.

The nav menu has a hover element that I like on the menu options but not on the home button on the left side of the menu (the bird graphic). I would like to either have the hover transparent, so that the user doesn’t realize there is a hover, or get rid the hover effect for that link only. Because I’m using a custom stylesheet, if I just delete code or leave something unspecified, the CSS defaults back to the original stylesheet.

Any help would be appreciated.

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

Andrew Nevins
(@anevins)

WCLDN 2018 Contributor | Volunteer support

11 years, 5 months ago

If styles aren’t available in your custom stylesheet, you need to create them.

I see you’ve tried to create these styles, but you’ve applied them to the anchor tags whereas the issue occurs on hover of the <li> element.

This is illustrated on live 45 of custom.css.
You need to override this just for the home item. Fortunately the home list item has a class of home.

In future use a Browser Inspector Tool to explore these CSS-specific issues.
Thread Starter kmolinanauert
(@kmolinanauert)

11 years, 5 months ago
Thank you Andrew, this seems like a very reasonable explanation, unfortunately I’m still at a loss. From your explanation, I would guess the code should be something like this:
```
#navigation ul.home > li:hover {
    background-color:transparent;
    box-shadow: none;
}
```
But this, and other variations I’ve tried don’t have an effect.
esmi
(@esmi)

11 years, 5 months ago

I’m sorry but as you are using a commercially supported theme, you need to seek any further support from the theme’s developers.
Andrew Nevins
(@anevins)

WCLDN 2018 Contributor | Volunteer support

11 years, 5 months ago
You’re nearly there, Kmolinanauert, but try these selectors instead;
```
#navigation ul.nav li.home:hover
```
Thanks Esmi
Thread Starter kmolinanauert
(@kmolinanauert)

11 years, 5 months ago

Wonderful, thank you kindly.

jman88
(@jman88)

11 years, 4 months ago

kmolinanauert, I really like the look of your theme, very unique from the template theme. By the way, I was wondering how you did you remove the dimming effect on your products page. …Whenever I hover over a product, it pops up, and dims the rest of the items. How would I go about removing this feature?

Any help would be really Great! thank you so much in advanced!

Toralf78
(@toralf78)

11 years, 1 month ago

@ kmolinanauert

You’re website looks great. I am looking for the way to customize the nav menu and add a logo as well. Could you point me into the right direction and explain how you added the bird to the nav menu?

Thanks a lot.

Andrew Nevins
(@anevins)

WCLDN 2018 Contributor | Volunteer support

11 years, 1 month ago

@toralf78, that’s not how these forums work.

If you need support, you create your own thread.