CODEWITHSUNDEEP
htmlcssnavigationcurrentitem
Shaun Taylor
Shaun Taylor

Reputation: 972

Current Menu Colour CSS Navigation

I'm having trouble with a current menu items and them not showing the correct colour.

The page is here: http://new.leicesterymca.co.uk/youth-community/our-work/youth-homelessness/ the trouble I am having is in the navigation in the left hand sidebar.

Youth Homelessness –Ambition

We're on the Youth Homelessness page, so the 'Ambition' menu item shouldn't be the same, dark blue colour as Youth Homelessness. It should be #8fa9ba (Lighter blue).

If you click on the Ambition page, the two actually display as I want them...

The CSS Im working with is here: 

/* ------ Menu Level 3 -------*/



.sub-nav-left {
  margin:68px 0 0 0;
  padding:0;
  font-weight: bold;
}

.sub-nav-left a {
  text-decoration: none;
  color: #2f9395;
}

.sub-nav-left a:hover {
  color: #163a52;
}

.sub-nav-left  ul {
  width: 95%;
  margin: 0;
  padding: 0;
}

.sub-nav-left li {
  margin: 0 0 0 0;
  padding: 10px 0 10px 0;
  text-indent: 0;
  border-bottom: 1px solid #e9eaeb;
}

.sub-nav-left li:before {
  content: none;
}

.sub-nav-left li:last-child {
  border-bottom: none;
}

.sub-nav-left .sub-menu li {
  text-indent: 20px;
  padding: 5px 0 0 0;
  border: none;
}

.sub-nav-left .sub-menu a {
  color: #9fcac7;
}

.sub-nav-left .sub-menu a:hover {
  color: #8fa9ba;
}






/* STYLING FOR THE CURRENT MENU ITEMS - Menu Level 3 */


/* This styles the top level parent item */
.sub-nav-left .current-menu-parent > a {
  color: #163a52;
}

/* This styles the dropdown menu current item  */
.sub-nav-left .current-menu-item a {
  color: #163a52;
}

/* This styles the sub menu */
.sub-nav-left .current-menu-item a {
  color: #163a52;
}






/* STYLING FOR THE CURRENT MENU ITEMS - Menu Level 3 - Sub */


/* This styles the top level parent item */
.sub-nav-left .sub-menu .current-menu-parent > a {
  color: #8fa9ba;
}

/* This styles the dropdown menu current item  */
.sub-nav-left .sub-menu .current-menu-item a {
  color: #8fa9ba;
}

/* This styles the sub menu */
.sub-nav-left .sub-menu .current-menu-item a {
  color: #8fa9ba;
}

Upvotes: 0

Views: 47

Answers (1)

Matt Litzinger
Matt Litzinger

Reputation: 111

The darker color (#163a52) should only apply to direct decedents of .current-item, right? If so, you can change the selector to this:

.sub-nav-left .current-menu-item > a instead of .sub-nav-left .current-menu-item a

Upvotes: 1

Related Questions