Monitor Reply

Support

Increase size of active link

Permalink Browser Info Environment January 26, 2011 at 11:13 PM

I would like to increase the size of the font in the active link (the one that is bolded when on that page). BTW - I've built a template and am editing superfish.css there.

In the fist code line of the last section of the css file (see below), I've tried both of these:

font-size:larger;
font-size:200%;

Neither has had any effect. Can you tell me the correct script and place to do this? Thanks!

/*** ccm customizations ***/
ul.sf-menu .nav-selected { font-weight:bold; }
ul.sf-menu li.nav-selected li{ font-weight:normal; }

Type:	Discussion
Status:	New

MattWaters replied on Jan 27, 2011 at 1:08 pm Permalink Best Answer Reply

Try setting the font size with em as shown below. This takes the base font size and multiplies it.

/*** ccm customizations ***/
ul.sf-menu .nav-selected { 
  font-weight:bold;
  font-size: 1.5em;
}
ul.sf-menu li.nav-selected li { 
  font-weight:normal;
  font-size: 1.5em;
}

or you can precisely specify the size in pixels by using px:

/*** ccm customizations ***/
ul.sf-menu .nav-selected { 
  font-weight:bold;
  font-size: 20px;
}
ul.sf-menu li.nav-selected li { 
  font-weight:normal;
  font-size: 20px;
}

This seems to work for me on my site.

jeepinjane replied on Feb 3, 2011 at 3:15 am Permalink Reply

This worked great, thank you!! Although I ended up going with a different font color instead because this increased font size went past the bottom border and looked terrible.

MattWaters replied on Feb 3, 2011 at 12:43 pm Permalink Reply

Cool, glad it worked for you!