Tag Archives: expound

Tweaking WordPress’s Expound theme’s menu

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;
wordpress expound theme menu tweaked

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!