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.

General Questions

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

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

.current Doesn't seem to recognize current page


Reply

3 Posts   1184 Views

Avatar
Bstarr

27 May 2011 at 3:21am Community Member, 25 Posts

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

27 May 2011 at 7:55am (Last edited: 27 May 2011 7:58am), Community Member, 141 Posts

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

27 May 2011 at 8:59am Community Member, 25 Posts

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