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)
  • [email protected]

    (@bernieabcwebservicecom)

    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

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    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.
    https://www.ads-software.com/extend/plugins/custom-css-manager-plugin/

    [email protected]

    (@bernieabcwebservicecom)

    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;
    }

    Thread Starter kennethschultz

    (@kennethschultz)

    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.