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

    (@anevins)

    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.
    http://wordpress.org/extend/plugins/custom-css-manager-plugin/

    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.