display background image on active state

[csser12]

Hello, I’d like to display a background image in my left menu only during the “active” states in my list. I’m having trouble getting anything to show up using the ~ or + methods, and trying to get the element that the list is nested in to display the background only in the active states.

It needs to be displayed in the container element because it will go underneath all the list items. (It’s a vertical set of dots that I want to go under the list elements as they become active). Thanks!

http://98.130.132.73/calculatingcosts-beta2.html#scrollNav-2

[csser12]

Here’s the css:

.scroll-nav {
position: absolute;
}
.scroll-nav.fixed .scroll-nav__wrapper {
position: fixed;
top: 60px;
}
.scroll-nav__wrapper {
padding: 10px 5px 0px 21px;
}
.scroll-nav__left{
background-color:#066;
}
.scroll-nav__heading {
color: #000;
display: block;
font-family: ‘Questrial’, sans-serif;
font-size: 33px;
margin-bottom: 15px;
padding-bottom: 10px;
padding-top: 10px;
text-align: center;
}
.scroll-nav__heading:before {
font-size: 40px;
}
.scroll-nav__list {
margin-bottom: 0;
font-family: ‘Questrial’, sans-serif;
}
.scroll-nav__item {
font-size: 23px;
font-weight: 200;
line-height: 2.2em;
margin: 0 auto;
text-decoration:none;
}
.scroll-nav__item:before {
color: #000;
display: block;
pointer-events: none;
position: absolute;
text-align: center;
}
.scroll-nav__item.active {
font-weight: 600;
}
.scroll-nav__item.active:nth-child(1) ~ .scroll-nav__list{
background-image:url(3dots.png);
background-repeat:no-repeat;
}
.scroll-nav__item.active:nth-child(2) {
font-weight: 600;
color: #3C6;
}
.scroll-nav__item.active:nth-child(3) {
font-weight: 600;
color: #990;
}
.scroll-nav__item.active:nth-child(4) {
font-weight: 600;
color: #C33;
}
.scroll-nav__item.active a:hover {
font-weight: 600;
}
.scroll-nav__link {
color: #000;
display: block;
margin: 0 auto;
padding-left: 4px;
text-decoration:none;
}
.scroll-nav__link a:hover {
color: #000;
}

[Paulie_D]

Perhaps you could make a Codepen instead of providing a code dump?

Thanks.

[Author]

Posts