WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Twelve
Custom Menu active link color (5 posts)

  1. kennethschultz
    Member
    Posted 1 year ago #

    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

  2. Bernie@abcwebservice.com
    Member
    Posted 1 year 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
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year 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.
    http://wordpress.org/extend/plugins/custom-css-manager-plugin/

  4. Bernie@abcwebservice.com
    Member
    Posted 1 year 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
    Member
    Posted 1 year 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