I’m helping on a site for a not-for-profit for which we selected “Expound” as the base theme. I like Expound; it looks great, there’s no jQuery- or webfont-cruft to worry about and although the CSS comes with a seperate reset.css-file, it does (Auto-)optimize perfectly.
But I wasn’t happy with the menu color-scheme and with the fact that the menu lacked an indication that a child page of a main entry was being shown instead of the page of that main entry itself (confused much?).
Anyway, this is what I ended up with;
For those wanting to do something similar, this is the relevant CSS in my child theme;
/* don't want no blue */ .navigation-main .current-menu-item > a { background: #557B47 !important; } /* triangle should not be blue either, need it to be a bit bigger */ .navigation-main ul > .current_page_item a:after, .navigation-main ul > .current-menu-item a:after, .navigation-main ul > .current-post-ancestor a:after, .navigation-main ul > .current-menu-parent a:after, .navigation-main ul > .current-post-parent a:after { border-top: 10px solid #557B47 !important; bottom: -14px; z-index: 1000; } @media screen and (min-width: 600px) { /* if page from submenu, add line under parent item to show your in that submenu */ .navigation-main ul > .menu-item { border-bottom: 6px solid #3A3A3A !important; } .navigation-main ul > .current_page_item, .navigation-main ul > .current-menu-item, .navigation-main ul > .current-post-ancestor, .navigation-main ul > .current-menu-parent, .navigation-main ul > .current-post-parent { border-bottom: 6px solid #557B47 !important; } /* but not in submenu */ .navigation-main .sub-menu > .menu-item { border-bottom: 0px !important; } /* less padding at the bottom to compensate for that extra line */ .navigation-main a { padding: 10px 10px 4px !important; } /* except when in submenu */ .navigation-main .sub-menu a { padding: 10px !important;; } } /* change color to default brown if child-item is active */ .navigation-main ul > .current_page_item, .navigation-main ul > .current-menu-item, .navigation-main ul > .current-post-ancestor, .navigation-main ul > .current-menu-ancestor, .navigation-main ul > .current-menu-parent, .navigation-main ul > .current-post-parent { background: #3A3A3A !important; }
Have fun!