Main Menu Font Styling – CSS Selectors

Posted in: ,

Listed Below are the various CSS Selectors that can be modified to adjust the look/feel of the Main Menu tems.

Please note – With Karma 2.6 and higher most of the customizations shown bellow can easily be done in Site Options > Advanced Options.

To use, simply add desired CSS to the ‘Custom CSS’ area of the Site Options Panel. Site Options > Styling Options > Custom CSS

TOP LEVEL FONT COLOR:

#menu-main-nav li strong {color: #FFFFFF !important;}

TOP LEVEL FONT HOVER COLOR

#menu-main-nav a:hover strong {color:#FFFFFF !important;}

MENU DESCRIPTIONS FONT COLOR:

#menu-main-nav li span.navi-description {color:#FFFFFF !important;}

MENU DESCRIPTIONS FONT SIZE:

#menu-main-nav li span.navi-description {font-size:13px !important;}

MENU DESCRIPTIONS FONT HOVER COLOR:

#menu-main-nav li span.navi-description:hover span {color:#FFFFFF !important;}

CURRENT PAGE FONT COLOR:

#menu-main-nav li.current_page_item a strong, #menu-main-nav li.current_page_parent a strong {color:#FFFFFF !important;}

CURRENT PAGE MENU DESCRIPTION FONT COLOR

#menu-main-nav li.current_page_item a span.navi-description, #menu-main-nav li.current_page_parent a span.navi-description {color:#FFFFFF !important;}

TOP LEVEL FONT SIZE:

#menu-main-nav li strong {font-size:14px !important;}

DROPDOWN FONT SIZE:

#menu-main-nav .drop li a {font-size:15px !important;}

SECOND DROPDOWN FONT SIZE:

#menu-main-nav .drop .drop li a {font-size:18px !important;}

DROPDOWN FONT COLOR:

#menu-main-nav .drop li a {color:#FFFFFF !important;}

SECOND DROPDOWN FONT COLOR:

#menu-main-nav .drop .drop li a {color:#FFFFFF !important;}

You can add any combination of the above plus a different font style by adding the font-size and/or a font-family property to any of the CSS classes above.

Please see the example bellow:

#menu-main-nav li strong {color:#FFFFFF !important; font-size:14px !important; font-family:verdana !important;}

 

Please note:

The color code #FFFFFF is simply white. Please adjust each of the CSS classes to the desired color code.

For a HTML color code chart, please click here:
http://htmlcolorcodes.org/

For a list of Web Safe Fonts please click here:
http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

Furthermore, here’s a great Tutorial on how to use CSS font styles in CSS:

http://www.w3schools.com/css/css_font.asp