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

Community Forums Forums Design Tips and Tricks CSS fix for Education theme dropdown menu issue (here's how)

This topic is: not resolved

This topic contains 23 replies, has 9 voices, and was last updated by  John 9 months, 1 week ago.

Viewing 15 posts - 1 through 15 (of 24 total)
  • Author
    Posts
  • #3739

    John
    Participant
    Post count: 157

    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 ;)

    • This topic was modified 1 year, 8 months ago by  John. Reason: HTML corrections
    • This topic was modified 1 year, 8 months ago by  John. Reason: HTML corrections
    #4051

    Lil Chris
    Participant

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

    #4061

    Anita
    Participant
    Post count: 7510

    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!


    When asking for help, please provide a link or screen shot showing your problem!
    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me!

    #4064

    John
    Participant
    Post count: 157

    You’re welcome!


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

    #4067

    Lil Chris
    Participant

    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).

    #4069

    John
    Participant
    Post count: 157

    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 ;)

    #4081

    Lil Chris
    Participant

    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.

     

    • This reply was modified 1 year, 8 months ago by  Lil Chris. Reason: spelling
    • This reply was modified 1 year, 8 months ago by  Lil Chris. Reason: spelling
    #4084

    Lil Chris
    Participant

    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

    #5060

    John
    Participant
    Post count: 157

    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 ;)

    • This reply was modified 1 year, 8 months ago by  John. Reason: HTML code editor explanation
    • This reply was modified 1 year, 8 months ago by  John. Reason: HTML code editor explanation
    #39682

    Neal
    Participant
    Post count: 2

    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

    #39864

    John
    Participant
    Post count: 157

    Hey Neal,

    You’re welcome! Glad you found it helpful.

    John


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

    #39900

    John
    Participant
    Post count: 157

    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 ;)

    #39912

    sentient
    Participant
    Post count: 1

    Thanks John for this great help and sharing your expertise!

    Paul

    #39951

    John
    Participant
    Post count: 157

    You’re welcome Paul!


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

    #39975

    Neal
    Participant
    Post count: 2

    Oh – that’s even better – thank you very much again!

    Neal

Viewing 15 posts - 1 through 15 (of 24 total)

You must be logged in to reply to this topic.