Jump to content


Photo
- - - - -
Resolved

How to change Font Size in Navigation Bar?



  • Please log in to reply
11 replies to this topic

#1 rwk123

rwk123

    Advanced Member

  • Members
  • 34 posts

Posted 03 May 2012 - 02:30 PM

I recenlty upgraded to Pagelines Framework from Platform Pro. My Navigation bar is now a tiny font. How do I change that size? Also, my widget sidebars no longer put a space between individual pages/post titles. Any idea how to change that?

#2 Jenny

Jenny

    Owned by PageLines

  • Unicorn Store Dev

  • 2920 posts
  • LocationWV
  • Country: Country Flag

Posted 03 May 2012 - 04:07 PM

You will need to add a couple CSS elements to make this work. Probably changing the font size on the .main nav li a will work.

Keep in mind we can't design your site for you so if you need CSS help, make sure you've downloaded

Please Login or Register to see this Hidden Content

and check out

Please Login or Register to see this Hidden Content

for more info. Also please be sure to watch our Firebug video tutorial

Please Login or Register to see this Hidden Content

.

If your site requires customization, you may wish to consider requesting a quote from one of our authorized Professional designers by visiting

Please Login or Register to see this Hidden Content

.

Common CSS Tweaks

Please Login or Register to see this Hidden Content



Please Login or Register to see this Hidden Content



#3 rwk123

rwk123

    Advanced Member

  • Members
  • 34 posts

Posted 03 May 2012 - 04:31 PM

Aggravating. It was perfect before I upgraded to Framework. Only upgraded b/c of the mobile upgrades.

#4 Jenny

Jenny

    Owned by PageLines

  • Unicorn Store Dev

  • 2920 posts
  • LocationWV
  • Country: Country Flag

Posted 03 May 2012 - 05:17 PM

If you look at the common CSS tweaks link I provided, you will see sample CSS in there to change font color of the menu. Just use that and change it for the font size. Also, make sure you've sent your fonts up in the Typography settings.

#5 fbabbitt

fbabbitt

    Newbie

  • Members
  • 9 posts

Posted 04 May 2012 - 06:50 PM

I used this code (which I found here somewhere) in the Custom Code box. Change the "1.2" to whatever value works best for you. .main-nav li a { font-size: 1.2em !important; }
  • liamoshea and seo global like this

#6 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 04 May 2012 - 08:35 PM

Thank you Frank for that excellent reply.

#7 rock_admin

rock_admin

    Newbie

  • Members
  • 4 posts

Posted 10 May 2012 - 01:21 AM

I was able to do this using CSS, but changing the font size of the main menu links using CSS is ridiculous! Very poor content management planning when you don't take into account a simple input for adjusting one of the most prominent (and arguably the most important) sections of the site :(
  • seo global and photomomwife like this

#8 mackenzie

mackenzie

    Advocate

  • Members
  • 333 posts
  • Country: Country Flag

Posted 10 May 2012 - 01:57 AM

Have you checked out the free plugin called Simple CSS Lite? It allows you to change some of the menu/navigation items without having to write CSS code. Jenny, one of our tech reps, created it :)

Please Login or Register to see this Hidden Content



#9 mcarv64

mcarv64

    Newbie

  • Members
  • Pip
  • 1 posts

Posted 25 June 2012 - 05:57 AM

Found this with Firebug. Paste the following into Custom Code CSS and change the .9em value to whatever you want. This will change the size of your fixed menu font without having to use the Classic Navbar required for CSS Lite. .navbar .navline { font-size: .9em; }

#10 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 25 June 2012 - 04:08 PM

Yes, the fonts in the navigation menu are fixed via CSS. Different fonts have different heights, so CSS was the most easily applied sizing solution. The code above can be adjusted up or down to change font size easily. Just add it to Custom Code > CSS Rules.

#11 seo global

seo global

    Newbie

  • Members
  • Pip
  • 1 posts

Posted 26 September 2012 - 08:41 PM

I used this code (which I found here somewhere) in the Custom Code box. Change the "1.2" to whatever value works best for you. .main-nav li a { font-size: 1.2em !important; }


THANK YOU SO MUCH FOR THIS!

I have tried ever stupid code in this whole forum, installed css lite, and looked through sexy-snips, but NOTHING worked. I don't know if the new framework prevented old code from working, but it seems like it would be very important to have at least an updated reference for the most common elements that may need custimzation.

Also, am I the only one who can't copy/paste text in their CSS field or copy text in Sexy Snips. It's ridiculous.

Seriously, do this.

Thanks.
  • photomomwife likes this

#12 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 27 September 2012 - 02:03 AM

The topic was marked as resolved.





Also tagged with one or more of these keywords: Resolved