Is there a way to add CSS that will highlight only the navigation item of the current page you are on?

CM1
1

I have the code below which displays the vertical navigation widget based on the current page. Upper levels appear collapsed and the current level is open and contains the link tot he current page. I was wondering if there was a CSS command available to isolate only the line item associated with the current page and add a highlight or background color. Thoughts? My website is not live so I can’t provide the sample but here is a crude example of what I want the left nav to show.

Example: (Currently on the Testing Center Page)

Future Students
Academic Affairs
Academic Records
Academic Success Center
English Language Learners
Testing Center (Can we highlight this as we are on that page)
Tutoring Center
Business Affairs
Student Development

___________________________________________________

.HideSide {
display: none !important; }

.percussionleftnav li {
display: none;
}

.percussionleftnav li.nav-level-2 {
display: block;
}

.percussionleftnav li.current {
display: block;
}

.percussionleftnav .current > ul > li {
display: block;
}

2

the spacing didn’t show above… here is how the menu is aligned.

Future Students
Academic Affairs
…Academic Records
…Academic Success Center
…English Language Learners
…Testing Center (Can we highlight this as we are on that page)
…Tutoring Center
Business Affairs
Student Development

3

Hi Josh,

If you are looking to highlight the section you are on, in your side bar, take a look at this sample I use: (This is taken from a horizontal nav but should get the point across).

 ```
 .nav \> ul \> li { width:auto; float:left; text-transform:lowercase;} 
 .nav \> ul \> li.current {background-color:#576167;} 
 .nav \> ul \> li:hover {background-color:#576167;} 
 .nav \> ul \> li \> a {color:#d8dfe5; display:block;height:75px;line-height:75px;padding-right:12px; padding-left:12px;text-decoration:none;font-size:100%;} 
```
4

The only thing that seemed to do anything was the transform:lowercase and some spacing… I didn’t see any color changes at all… I changed them to some vibrant color codes too.

5

Josh,

Without seeing the page its tough to really say what might be causing the styles not to take hold. I would assume if Kemal’s code isn’t working it may be because of other CSS overriding it.

Have you ever used the developer tools with your browser? Chrome/Firefox, have a good set of tools that allows you to “inspect element” and see what properties of CSS are being used for a specific element. It will help you figure out what CSS is overriding your code.

Also if you use the property “!important”, it will by default override any existing CSS for that element regardless of where it is loaded on the page.
To read more: http://www.electrictoolbox.com/using-…

6

I’ll keep looking into it. I did use the !important but that still didn’t do it.

7

I got it to bold… still need to work on the color issue. Thanks for the help!

8

I spoke with Armani, your Customer Success Coach, regarding your trouble with styling. During your coaching call later this afternoon, he can help assist you with this…

Chris

9