Link won't render two classes

Question

I am working on the navigation of a site that was already built by someone else. They have an active class for the link that the page is on, however when a last class is added to the active class link, it will only render the active link in the browser. I looked at the source code in the browser and only one of the two classes shows up. The last navigation item is the only item that has this second class. It doesn't work correctly only when the page is on the last navigation item.

I am guessing this is probably something simple I am overlooking. I appreciate any help with this.

tl:dr - I am only able to render the .last class on the last navigation item.

I apologize if the CSS is terrible. I did not write it.

site page: http://securitybank.designangler.com/insurance

css:

#navigation .MainNavigation{
position:relative;
padding:12px 0px;
margin:0px 0px 0px 8px; /* left margin Changed from 28px on 10-21-13 */
list-style:none;
}

#navigation .MainNavigation li{
display:inline;
padding:12px 0px 0px 0px;
margin:0px 0px 0px 0px;
text-align:center;
}

#navigation .MainNavigation li a{
font-size:13px;
color:#FFF;
text-decoration:none;
padding:12px 14px 12px 14px;
margin:0px 0px 0px 0px; 
border-left:#648558 2px solid;
}

#navigation .MainNavigation li a.last{
border-right:#648558 2px solid;
}

#navigation .MainNavigation li a.active{
padding:12px 19px 12px 17px;
background: url(/_images/bkgd_Active.png) repeat;
}

#navigation .MainNavigation li a:hover{
background: url(../_images/bkgd_NavHover.png);
}

Hmm, I tried to add both classes via console and css was working fine. I've added both classes to various item in menu and the still worked. Just to be sure: your problem is, that .active and .last doesn't seem to be working when used together? — vlad saling, Oct 21 '13 at 18:43
@vladsaling yea that seems to be the problem. When I look at the page source I see both classes on the navigation item, but when I actually go to inspect it, .last is not rendering. all it is supposed to do is put a border-right of 2px on the last navigation item. — Phorden, Oct 21 '13 at 18:47
@Phorden when I open the page, I only see active class on the "Insurance" item. When I add .last (via console), it works fine. Try to open the page with javascript switched off. When I did it, both classes were there from the beggining and both were working. It seems like JS is removing that "last" class on page load - I know it sounds weird — vlad saling, Oct 21 '13 at 18:53
@vladsaling weird, it does seem to possibly be something javascript related. — Phorden, Oct 21 '13 at 18:56
It is this - directly in page. It basically sets the active class on corresponding nav item switching it with whatever is hardcoded. JS should be rewrote to "add" active class, not to replace anything with that class (or you can use last-child if ie8 and below is not a concern): function setActive() { aObj = document.getElementById('navigation').getElementsByTagName('a'); for(i=0;i=0) { aObj[i].className='active'; } } } window.onload = setActive; — vlad saling, Oct 21 '13 at 18:59
@vladsaling yea, I see that now. So basically it is overwriting the last class and just replacing it with the active class in that javascript function? — Phorden, Oct 21 '13 at 19:00
@vladsaling Any ideas on how to fix that? I am not much of an expert at JS. — Phorden, Oct 21 '13 at 19:02
You need to replace "aObj[i].className='active';" with "var saved = aObj[7]; saved.className = saved.className + " active";" according to this http://stackoverflow.com/questions/507138/how-do-i-add-a-class-to-a-given-element — vlad saling, Oct 21 '13 at 19:25
I forgot to add, that you need to update that script on every page where it is present. It might be good to consider including it from external JS. — vlad saling, Oct 25 '13 at 07:25
@vladsaling Thanks. I have already done this. I appreciate your help. — Phorden, Oct 25 '13 at 14:29

score 2 · Accepted Answer · edited May 23 '17 at 11:57

After a short discussion, the conclusion was, that class "active" was set by embedded JavaScript and due to a bug, same script was removing the class "last" on page load.

Specifically it was this line of JS:

aObj[i].className='active';

Solution is to replace line above with:

var saved = aObj[i]; saved.className = saved.className + " active";

Fixed with help of How do I add a class to a given element?

Link won't render two classes

1 Answers1