Jump to content


Photo
- - - - -

Change menu/navbar font

Menu navbar font

This topic has been archived. This means that you cannot reply to this topic.
5 replies to this topic

#1 nickelridge

nickelridge

    Newbie

  • Members
  • 2 posts

Posted 07 October 2012 - 05:38 PM

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.

#2 batman

batman

    Bat Learning

  • Members

  • 2167 posts

Posted 07 October 2012 - 07:43 PM

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

Please Login or Register to see this Hidden Content



If you need more CSS help, make sure you've downloaded Firebug for Firefox
and check out W3 Schools for more info.

Please Login or Register to see this Hidden Content



#3 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts

Posted 07 October 2012 - 10:26 PM

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.

#4 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts

Posted 07 October 2012 - 10:30 PM

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

Please Login or Register to see this Hidden Content


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

Please Login or Register to see this Hidden Content



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

#5 nickelridge

nickelridge

    Newbie

  • Members
  • 2 posts

Posted 08 October 2012 - 03:25 PM

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!

#6 catrina

catrina

    Advocate

  • Members
  • 12345 posts

Posted 08 October 2012 - 05:15 PM

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)?