Change menu/navbar font

[nickelridge 0]

Hello, I'm looking for the simplest way to improve the look of my menus (standard navbar and secondary nav menu - www.nickelridge.ca). I'm surprised that with such a good typography section that the menu style isn't included). I don't even see where in the editor to find the code to modify the menu style. I've also looked for a plugin that might help with this, with no luck. I'd like to change the font, size and colour. Please help. Thanks in advance.

[batman 389]

Hi nickeridge

To change colors

You can use the "Simple CSS Lite" plugin found in the PageLines Store to change all parameters.

It's a free plugin that allows you control over the color of the menu.

Simple CSS Lite only works on the standard navigation, it don´t work on NavBar.

To change font and size

You need add some CSS rules in

It is advisable to learn how to do this on your own too.

Check out http://www.pagelines.com/wiki/Custom_CSS

If you need more CSS help, make sure you've downloaded Firebug for Firefox

and check out W3 Schools for more info.

http://www.w3schools.com/

[Rob 547]

In Dashboard > PageLines > Site Options > Typography, the Typography - Secondary Font is the proper choice for the menu font.

To avoid people producing menus accidentally set with huge fonts, the font size itself is set in CSS. Some basic options are available under Edit Font Styling.

As Batman points out, Simple CSS Lite is the best solution for the Nav Classic menu, allowing you to change the color, background, etc, but not the font size.

Please keep in mind that fonts are fickle things. One font set at 12px height may appear quite tiny, compared to another set to the same height. With over 500 fonts available via the Google Fonts plugin, your options are endless.

If you're using NavBar, there are different means of changing the colors for that menu.

[Rob 547]

The code currently controlling the font size in your site is:

.main_nav {

font-size: 86%;

}

If you change the 86% to a higher number, the font size will increase. You may add the edited code to Dashboard > PageLines > Site Options > Custom Code in CSS Rules.

Please look at http://www.epicurus.com/

You'll see that using Simple CSS Lite I've been able to implement some good changes to the site's color scheme.

[nickelridge 0]

Actually, just messing with the secondary front in typography as suggested by Rob is good enough for me for now. I may revisit the more complicated CSS method in the future. Thanks to you both!

[catrina 103]

Will you need this topic open (if not, I will close this and for any other issues you have, a new topic can be started)?