JakeMills JakeMills - 5 months ago 83
CSS Question

How to change colour of Bootstrap scroll spy and why won't my logos resize?

I'm trying to create my portfolio for FCC. I have included a scrollspy to use as a navigation bar and I'm trying to change the way the active link looks, but I can't figure out how to change it with CSS. I am also having an issue with resizing the logos under the my skills section, nothing I try seems to be working. I would appreciate any information that would point me in the right direction.

http://codepen.io/JakeMills/pen/MepyEO?editors=1100

.nav .nav-pills .nav-stacked .active {
background-color:white;
text-decoration: underlined;
}

.aboutme .skillslogo.img-responsive {
max-height:150px;
max-width:100px;

}

Answer

Change link properties here:

.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover{
color: #fff;
background-color: #337ab7;
}

Change logos under skill here:

.skillslogo{

}

EDIT:

Note that if you want to have a different style for the normal 'active link' and the hover 'active link', you need to separate .nav-pills>li.active>a, .nav-pills>li.active>a:focus and .nav-pills>li.active>a:hover

Comments