Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

General Questions /

General questions about getting started with SilverStripe that don't fit in any of the categories above.

Moderators: martimiz, Sean, Ed, biapar, Willr, Ingo, swaiba

.current Doesn't seem to recognize current page


Go to End


3 Posts   1722 Views

Avatar
Bstarr

Community Member, 25 Posts

27 May 2011 at 3:21am

In my site navigation I have an image that should appear to highlight the current page that you are on however it doesn't seem to work in Silverstripe. Has anyone experienced this or have a suggestion on how to fix it?

This is the original CSS for the navigation. It wirks as intended when I coded the page using regular HTML. Take a look at the #Navigation ul li.current a this is the part that isn't working.

/* MAIN NAVIGATION - TABS
----------------------------------------- */
#Navigation {
height: 73px;
overflow: hidden;
position: absolute;
top: 0;
left: 4px;
z-index: 100;
font-size:11px;
}

#Navigation ul {
padding: 0 8px 0 0;
}

#Navigation ul li {
float: left;
margin: 0 -8px 0 0;
list-style-type:none;
}

#Navigation ul li a {
float: left;
width: 98px;
height: 73px;
line-height: 48px;
text-align: center;
text-transform: uppercase;
text-decoration: none;
color: #000;
font-size: 11px;

}

#Navigation ul li a:hover {
color: #fa635e;
}

#Navigation ul li a:active {
color: #fa635e;
}

#Navigation ul li a:selected {
background: url(http://www.cassiusblueconsulting.com/themes/cassiusblueco/images/menu.png) repeat-x 0% 0%;
line-height: 68px;
color: #fff;
}

#Navigation ul li.current a {
background: url(http://www.cassiusblueconsulting.com/themes/cassiusblueco/images/menu.png) repeat-x 0% 0%;
line-height: 68px;
color: #fff;
}

#Navigation ul li.current a:hover {
color: #fff;
}

Avatar
Invader_Zim

Community Member, 141 Posts

27 May 2011 at 7:55am

Edited: 27/05/2011 7:58am

Hi Bstarr, it's me again....

you assign the class .current to <a> tags in your html code.
But in your CSS it's assigned to li (e.g... #Navigation ul li.current a ...)

Try this in your css: #Navigation ul li a.current {...},
or assign .current to <li> tags in your html :-)

Cheers
Christian

Avatar
Bstarr

Community Member, 25 Posts

27 May 2011 at 8:59am

This fix worked too! Goes to show sometimes you just need a fresh pair of eyes. Thanks a bunch!