Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Henrik Christensen
seal-mask
.a{fill-rule:evenodd;}techdegree
Henrik Christensen
Python Web Development Techdegree Student 38,322 Points
Posted by Henrik Christensen
.a{fill-rule:evenodd;}techdegree
Henrik Christensen
Python Web Development Techdegree Student 38,322 Points

Active class when going to previous page?

Hi,

I just uploaded my website yesterday and have fixed some minor bugs today. Now I just got aware that there is a bug in the nav items on mobile devices and iPads.

The problem is when you go to either the portfolio or about page the active class is appended on the correct nav item BUT if you then click the "go back to previous page" button then it looks like both "Home" and "Portfolio" or "About" got the active class..

Any ideas how to fix this?

http://www.henrikac.com

1 Answer

Jacob Mishkin
Jacob Mishkin
23,118 Points
Jacob Mishkin
Jacob Mishkin
23,118 Points

I would suggest you use the focus pseudo class not active. Since you are using active It looks like its firing when you are active on a button, try using focus that way it should only run when you focus on that element.

Henrik Christensen
seal-mask
.a{fill-rule:evenodd;}techdegree
Henrik Christensen
Python Web Development Techdegree Student 38,322 Points
Henrik Christensen
.a{fill-rule:evenodd;}techdegree
Henrik Christensen
Python Web Development Techdegree Student 38,322 Points

Hi Jacob,

Thank you very much for your suggestion but I'm not sure how you want me to use it. Are you thinking something like this?

.nav a:hover,
.nav a:focus {
    background: #117bff;
    transition: .5s;
    border-radius: 5px;
}

/* instead of this */

.nav a:hover,
.active {
    background: #117bff;
    transition: .5s;
    border-radius: 5px;
}
Jacob Mishkin
Jacob Mishkin
23,118 Points

Exactly. I don't everything that is going in the CSS but it looks like the active state is being triggered when an active state is being pressed. the Focus and hover states should only react to those states of hover and then focus then you click on the link.