Changing font in Volusion left nav menu

Question

this is the code in our Volusion nav menu:

#display_menu_1 .nav {background-color:transparent;}
#display_menu_1 .nav_hover {background-color:transparent;}
#display_menu_3 .nav {background-color:transparent;}
#display_menu_3 .nav_hover {background-color:transparent;}

The URL is http://www.markpoulin.com As you can see, the nav menu is in a different font. The "About Us" and "Where to Buy" links at the bottom of the nav menu are in Verdana, and we'd like to match them, but I don't know how to change the font in the nav menu. I have tried researching online, but can't find this particular type of code, and have tried inserting the font family bit in different places but it hasn't changed the font.

Answer 1

I work with Volusion all the time and this is what I do when I absolutely can't find a way to change what I need to (only as a last resort!!). Specifically this will target all of those side menu links:

#lnk0, #lnk1, #lnk2, #lnk3, #lnk4, #lnk5, #lnk6, #lnk7, #lnk8, #lnk9, #lnk10, #lnk11, #lnk12, #lnk13, #lnk14, #lnk15, #lnk16, #lnk17, #lnk18, #lnk19, #lnk20, #lnk21, #lnk22, #lnk23, #lnk24, #lnk25, #lnk26, #lnk27, #lnk28, #lnk29, #lnk30, #lnk31, #lnk32, #lnk33, #lnk34, #lnk35, #lnk36, #lnk37, #lnk38, #lnk39, #lnk40, #lnk41, #lnk42, #lnk43, #lnk44, #lnk45, #lnk46 {
font-family: tahoma!important;

(Of course, change the font to whatever you wanted it to be). With volusion, because code is nested within tables within tables within tables (gag!), you'll need to be specific about what you are targeting.

Using !important can sometimes make css really messy but unfortunately I have to use it alot with volusion. Unlike what sweetamylase said, this trick will overwrite most of your inline style needs.

Here is an article on !important http://webdesign.about.com/od/css/f/blcssfaqimportn.htm

Answer 2

The reason why you're unable to style the nav menu is because it contains inline CSS. Here's a snippet from the first item on your nav menu :

<a onclick="return $K(0)" name="mM1" onfocus="_iF0C(0)" href="http://www.markpoulin.com/category-s/292.htm" class="nav" id="lnk0" style="border:none;background:transparent;display:block;;font-Family:Georgia;font-Weight:normal;font-Style:normal;font-Size:11px">Mother's Day</a>

Notice there font-Family:Georgia in the style attribute. Inline styles have the highest specificity, so it's impossible to overwrite with CSS selectors. Is there any way you can prevent the nav from generating inline styles?? eg. <a onclick="return $K(0)" name="mM1" onfocus="_iF0C(0)" href="http://www.markpoulin.com/category-s/292.htm" class="nav" id="lnk0">Mother's Day</a>

Read this learn more about CSS specificity: http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/