Jump to:

23376 Posts in 18186 Topics by 2867 members

General Questions

SilverStripe Forums » General Questions » .current Doesn't seem to recognize current page

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

Page: 1
Go to End
Author Topic: 1132 Views
  • Bstarr
    Avatar
    Community Member
    25 Posts

    .current Doesn't seem to recognize current page Link to this post

    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;
                }   

  • Invader_Zim
    Avatar
    Community Member
    141 Posts

    Re: .current Doesn't seem to recognize current page Link to this post

    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

  • Bstarr
    Avatar
    Community Member
    25 Posts

    Re: .current Doesn't seem to recognize current page Link to this post

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

    1132 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.