Search code examples
stylingmodxnav

Navigation currently selected item disregards the background-color. (wayfinder, ModX)

The title pretty much describes my problem. I've got a navigation menu at the top of my page with multiple drop-down sections. Now all of the bg-colors are recognised perfectly the only problem is that the menu that you are currently in (lets say 'Weblog') then it disregards the background-color specified and it just gives it the default background. I'm using the Wayfinder snippet in ModX which basically takes all specified pages and puts them in a menu. Ill note the css below since the wayfinder call wont be of much use. I'm open for all kinds of suggestions and improvements. Cheers, 

#nav {
/*   float: right; */
  font-style:uppercase;
  margin-left:100px;
  margin-right: 62px;
  margin-top: 36px;
  z-index: 2;
}               
#nav a{
  padding: 0 10px;
  letter-spacing: 1px;
}

#nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  z-index: 2;
}


#nav ul li.active a {
  background: #3f3a2b;
}
#nav ul li:hover{
  background-color:#3f3a2b;
}

#nav ul li {
  position: relative;
}

#nav ul li a {
  font-size: 13px;
  padding: 4px 8px;
  display: inline-block;
  font-family: Georgia, "Times New Roman", Times, serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: bold;
  line-height: 28px;
  color: #fff;
}


#nav ul li ul{
  border: 1px solid #2a2a2a;
}
#nav ul li ul li{

}
#nav ul li ul li:hover{
  background-color:#3f3a2b;
}
#nav ul li ul li a{
  color:black;
  font-size:11px;
  line-height:15px;
  border:none !important;
  width:170px;
  background: #FFF;
}
#nav ul li ul li a:hover{
  background-color:#3f3a2b;
}

#nav ul ul,
#nav ul ul ul {
  display: none;
  z-index: 2;
}

#nav ul li:hover > ul {
  display: block;
  position: absolute;
  top: 35px;
  left: 0;
}

#nav ul li:hover > ul li {
  float: none;
  background: #FFF;
  position: relative;
}

#nav ul li:hover > ul li:hover ul {
  display: block;
  position: absolute;
  top: 0;
  left: 186px;
}
#nav ul li ul li a:hover{
  background-color:#3f3a2b;
  color:white;
}
#nav ul li:hover ul li:hover ul {
  display: block;
}

#nav ul li ul li ul li a{
/*   line-height:25px !important; */
}

EDIT

Here are some screenshots explaining my problem:

This is what all items look like.

^This is what all items look like.^

This is what the menu looks like if you are currently in one of its pages ^This is what the menu looks like if you are currently in one of its pages^

Solution 
  • #nav ul li.active  li a {
   background: white;
}
#nav ul li:hover{
  background-color:#3f3a2b !important;
}

    this fixed the problem for me, thank you all for thinking with me.