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

Text color and hover #navigation


3 Posts   1252 Views


26 March 2010 at 12:50am Community Member, 6 Posts


In the layout.css I have defined #navigation. Code looks like following:

#Navigation ul{
   padding-top: 0px;
   padding-bottom: 0px;
   padding-left: 0px;
   padding-right: 10px;
#Navigation ul li{
   padding-top: 10px;
   padding-bottom: 10px;
   padding-left: 10px;
   padding-right: 10px;
   margin-top: 0px;
   margin-bottom: 0px;
   margin-left: 0px;
   margin-right: 0px;
   border-right:#ffbb00 2px solid;
#Navigation ul li:hover{

The menu displayes in a brownish color (#b34700) and on hover highlight with #FFBB00. All fine. Only the text displays blue underlined.

Where can I change the color and font of the text in the navigation menu?

On a "mouseover" the navigation text I can click to get to the page. I would like this to be possible also as soon as I hover over the padding around the text ? Is there a way to do that ?



26 March 2010 at 8:43am Community Member, 712 Posts

Q1: use the 'a' selector.

Q2. You need to use block style link tags with padding, not li tags.

These are really CSS questions and you'll probably get better answers from CSS groups.


27 March 2010 at 1:02am Community Member, 6 Posts

Hi Hamish,

Thank you very much. I managed to change the color with the 'a' selector.

/* makes the menu text oker */
#Navigation ul li a{
   color:#ffbb00 ;

/* menu text red and background oker on hover */
#Navigation ul li a:hover{
color: #b34700;
background: #ffbb00;

Will post the topic at the right group next time.