CSS fix for Education theme dropdown menu issue (here's how)

[John]

Education theme dropdown menu CSS issues...

I just installed the Education theme on a development site and have been giving it the once-over. I noticed, as have others, that the CSS for the dropdown menu is broken. After a quick search I found these two threads from the old support forum referencing this issue, but there might be more:

http://www.studiopress.com/support/showthread.php?t=108488&highlight=dropdown
http://www.studiopress.com/support/showthread.php?t=123993

Specifically, here are the problems that I'm seeing, and these are (mostly) reproducible on the demo site at http://demo.studiopress.com/education/:
1. When a child page is active, such as http://demo.studiopress.com/education/layouts/sc/, hovering over that active link in the dropdown menu causes it to disappear.
2. When any Theme Color other than the default color is active, the active dropdown menu item has the background color of an active parent menu item, which looks really bad.
3. What isn't reproducible on the demo site is that if a parent menu item is linked to an actual page and not just a redirect, when that page is active every child menu item in that specific dropdown has the background color of an active parent menu item. This looks really, really bad. See this screenshot to see what I'm referring to: http://db.tt/tSIiJvzT
4. This is more of personal style opinion, but by default when a user hovers over an inactive parent menu item (tab) the background color switches to white, which is the same as the header background color. Personally I'd like to see that go darker to make it a little more obvious that something is happening.

If you'd rather not make these changes yourself, you can download the corrected style.css file at this link from my Dropbox: http://db.tt/xb29QhXA

The fix:

1. There is a "missing" comma at line 380. Add the comma.
2. Someone was a little zealous with the use of "!important" and changing the hover text color for active dropdown menu items to white (#fff). Let's fix that in lines 371, 386, 2038, 2127, 2216, 2305, and 2394 by commenting out (or removing) the !important declaration. That will keep the menu item text from disappearing on hover.
3. There may be a more elegant way for this next fix, but I think it would involve rewriting the CSS for the various color styles and I didn't have the time to do that. At line 2448, AFTER all the color style changes, you need to correct some of those changes by adding this code:

/* Dropdown Menu Corrections
------------------------------------------------------------ */
.education-black #header .menu .current-menu-item ul li a,
.education-black #header .menu ul li.current-menu-item a,
.education-green #header .menu .current-menu-item ul li a,
.education-green #header .menu ul li.current-menu-item a,
.education-purple #header .menu .current-menu-item ul li a,
.education-purple #header .menu ul li.current-menu-item a,
.education-red #header .menu .current-menu-item ul li a,
.education-red #header .menu ul li.current-menu-item a,
.education-teal #header .menu .current-menu-item ul li a,
.education-teal #header .menu ul li.current-menu-item a {
background: none;
border-bottom: 1px dotted #ddd;
color: #747474/* !important */;
font-size: 14px;
padding: 9px 8px 8px;
position: relative;
text-transform: none;
text-shadow: none;
width: 168px;
}

4. The default CSS doesn't tell a user which dropdown menu item is active. I added these selectors at line 401 so that the active dropdown menu item text would be the link color. It's my opinion that this was not included in the original CSS by accident, though I could be wrong. If you make this change, don't forget to add a comma at the end of line 400!

#header .menu li ul li a:active,
#header .menu li ul li a:hover,
#header .menu .current-menu-item ul li a:active,
#header .menu .current-menu-item ul li a:hover,
#header .menu li ul li.current-menu-item a:active,
#header .menu li ul li.current-menu-item a,
#header .menu ul li.current-menu-item a:hover

5. This "fix" is more personal, but like I mentioned earlier I think the background color for the menu tabs should go darker rather than lighter when a user hovers over them. At line 351 replace these lines:

#header .menu li a:hover {
background: #fff;
border-bottom: 3px solid #ccc;
}

with these:

#header .menu li a:hover {
background: /* #fff */#eee;
border-bottom: 3px solid #ccc;
text-shadow: #e6e6e6 -1px -1px;
}

Hope that helps!
John

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[Lil Chris]

THANK YOU!!! Thought I was losing my mind and starting to question the quality of this theme...

[Anita]

Me too! I have a site I am working on for a client and I was about to pull my hair out! I will give this a try. Thank you for sharing!

---

Love coffee, chocolate and my Bella!

[John]

You're welcome!

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[Lil Chris]

Thought I'd mention, all the -moz- should be removed as well, if you want them to function in FF (as firefox no longer reads it, from what I understand).

[John]

Lil Chris, do you have a link to that information?

I haven't heard that yet, but my thought is that there are so many versions of Firefox around that you'd be better off leaving it in there.

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[Lil Chris]

I think this is it https://developer.mozilla.org/en-US/docs/CSS/border-radius

I tend to agree, but... perhaps it's only certain attributes, who knows. My statement of "all" is probably inaccurate, the problem arose for me a while ago with rounded edges.

 

[Lil Chris]

I apologize for speaking to generally,

Towards the bottom

"Note: Support for the prefixed version (-moz-border-radius) was removed in Gecko 13.0 (Firefox 13.0 / Thunderbird 13.0 / SeaMonkey 2.10)."

I'm tired and frustrated at the moment

[John]

Update to Education theme dropdown menu issue CSS fix

I've been working more on the Education theme and noticed there were some things lacking in some of the CSS fixes I posted earlier.

1. All of the selectors in step 3 above can be replaced with one line, and as a bonus this takes care of nested menus as well. I tested it to three deep, but it should go as deep as you want to go. Here's the replacement code:

/* Dropdown Menu Corrections
------------------------------------------------------------ */
#wrap #header ul.sub-menu li a {
background: none;
border-bottom: 1px dotted #ddd;
color: #747474;
font-size: 14px;
padding: 9px 8px 8px;
position: relative;
text-transform: none;
text-shadow: none;
width: 168px;
}

2. All of the selectors listed in step 4 above can also be replaced with one line, and again this takes care of nested menus. Here's the selector you should use:

#header .sub-menu .current-menu-item > a

Edit: That's a child selector in the code above (a right facing angle bracket) between the .current-menu-item and the a, that didn't survive the code editor...

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[Neal]

Hey - just a big thank you for this great information - I'm not good with css so I downloaded the new css file from your drop box as you suggested and it worked perfectly - absolutely awesome and so appreciated. Now the drop down menu on the Education theme is fixed -weird how this hasn't been looked at by the studiopress team.

Have a wonderful day,

Neal

[John]

Hey Neal,

You're welcome! Glad you found it helpful.

John

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[John]

For anyone following this thread:

I've made further improvements/enhancements to the menu CSS, some of which I mentioned earlier in this thread, and uploaded the updated style.css file to Dropbox. The Dropbox link now has the current updated CSS file: http://db.tt/xb29QhXA

Enjoy!

John

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[sentient]

Thanks John for this great help and sharing your expertise!

Paul

[John]

You're welcome Paul!

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[Neal]

Oh - that's even better - thank you very much again!

Neal

[Tim]

I lurv John.

Thanks man, huge time saver.

[HelenaB]

Thank you for posting this John. Saved me a ton of combing through CSS!

[John]

Glad to help!

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[Aj]

I can't tell you how much this helped get the color issue straightened out - more accolades from the peanut gallery - Thank you!

---

MyFlatEarth
City of Pasadena TX Financial / Mayor Johnny Isbell / Intranet test site

[Aj]

Uh oh, I think I've spoken too soon -

I'm not sure what I did wrong, but my responsive dropdown is being buried by the secondary menu.

The site link is http://myflatearth.com/intra

I added the other corrections but I'm not sure what I did wrong... any help would be greatly appreciated!! Thank you...

---

MyFlatEarth
City of Pasadena TX Financial / Mayor Johnny Isbell / Intranet test site

[Author]

Posts