Twenty Twelve
Custom Menu active link color (5 posts)

  1. kennethschultz
    Posted 3 years ago #


    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

  2. Bernie@abcwebservice.com
    Posted 3 years ago #

    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

  3. Andrew Nevins
    Forum moderator
    Posted 3 years ago #

    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.

  4. Bernie@abcwebservice.com
    Posted 3 years ago #

    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;

  5. kennethschultz
    Posted 3 years ago #

    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

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic