Nav Hover Erratic

[mountash]

When you hover/mouse over the nav bar the wrong link is often highlighted. Can anyone shed light on this issue?

http://mountainash.org/worksite/

---

Janet Morrow | Mountain Ash Website Design | http://www.mountainash.org
Visit Our Site for more information and pricing.

http://mountainash.org/worksite/

[mountash]

The main issue appears to be with home. If you go to an interior page, and mouse over home it will not highlight...

---

Janet Morrow | Mountain Ash Website Design | http://www.mountainash.org
Visit Our Site for more information and pricing.

[ᴅᴀᴠɪᴅ]

It's because your trying to change the position on hover from static to relative. Adding this will stop it..

.genesis-nav-menu .menu-item {
    position: relative;
}

This way its always relative and won't cause issues.

---

I love helping creative entrepreneurs build epic things with WP & Genesis.

Follow on Twitter

[mountash]

Thank you David it worked like a charm. Can you tell me how you found the issue? I tried pouring over the CSS, and could not figure it out...

---

Janet Morrow | Mountain Ash Website Design | http://www.mountainash.org
Visit Our Site for more information and pricing.

[ᴅᴀᴠɪᴅ]

Sure, I used firebug in firefox. I hovered over the home menu link and noticed the the :hover css was adding position: relative;

I know that with things like hover effects, (the same with scroll effects also) you have to be careful which properties you change. The browser doesn't like too much going on and changing the wrong thing can cause weird problems. Changing a position is fairly 'expensive CSS' for the browser.

---

I love helping creative entrepreneurs build epic things with WP & Genesis.

Follow on Twitter

[Author]

Posts