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   1220 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!