Support » Theme: Twenty Twelve » Custom Menu active link color

  • Hi

    I’m using the Custom Menu-widget in the Twenty Twelve Main Sidebar as a menu.
    Somehow the CSS for the widget-area will show the active link color:

    /* Sidebar */
    .widget-title {
    	color: #000;
    	font-size: 14px;
    	font-weight: 500;
    	letter-spacing: none;
    	line-height: 2.6em;
    	text-transform: none;
    	font: italic 20px georgia, baskerville, palatino linotype, serif;
    .widget-area .widget {
    	word-wrap: break-word;
    	-webkit-hyphens: auto;
    	-moz-hyphens: auto;
    	hyphens: auto;
    	margin-bottom: 48px;
    	margin-bottom: 3.428571429rem;
    .widget-area .widget h3 {
    	margin-bottom: 4px;
    	margin-bottom: 0.714285714rem;
    .widget-area .widget p,
    .widget-area .widget li,
    .widget-area .widget .textwidget {
    	font-size: 13px;
    	font-size: 0.928571429rem;
    	line-height: 1.846153846;
    .widget-area .widget p {
    	margin-bottom: 24px;
    	margin-bottom: 1.714285714rem;
    .widget-area .textwidget ul {
    	list-style: disc outside;
    	margin: 0 0 24px;
    	margin: 0 0 1.714285714rem;
    .widget-area .textwidget li {
    	margin-left: 36px;
    	margin-left: 2.571428571rem;
    .widget-area .widget a {
    	color: #000;
    	text-decoration: none ;
    .widget-area .widget a:link, .widget a:visited {
    	color: #000;
    .widget-area .widget a:hover, .widget a:active {
    	color: #a0c7b4;

    Can anybody see why it won’t show the active link color.

    Sincerely Kenneth

Viewing 4 replies - 1 through 4 (of 4 total)
  • It sounds like you are trying to make your menu a specific color for the current page you are on. My solution was to add this css to the stylesheet.

    .main-navigation .current-menu-item > a,
    .main-navigation .current-menu-ancestor > a,
    .main-navigation .current_page_item > a,
    .main-navigation .current_page_ancestor > a {
    color: #99FF66;
    font-weight: bold;

    Hope that helps

    Moderator Andrew Nevins


    Forum moderator

    At least use a plugin that facilitates Custom CSS, rather than edit the theme’s files. You’ll only lose your modifications when the theme updates.

    OOps sorry that was the original code for the main navigation menu, I had to change it to this for the secondary menu to work:

    #secondary.widget-area .current-menu-item > a,
    #secondary.widget-area .current-menu-ancestor > a,
    #secondary.widget-area .current_page_item > a,
    #secondary.widget-area .current_page_ancestor > a {
    color: #DA801B;

    Thanks Bernie

    It worked 🙂

    @andrew – i’m using a child-theme, so no need for the css-manager-plugin (unless it has some other features usefull for the ongoing work with the styling)

    sincerely Kenneth

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Custom Menu active link color’ is closed to new replies.