Lower Font Size of Navigation
Support Area › Forums › Authentic › Lower Font Size of Navigation
- This topic has 17 replies, 4 voices, and was last updated 11 years, 10 months ago by Robyn.
-
AuthorPosts
-
May 3, 2012 at 14:53 #5865rainbowsplashParticipant
Where can I lower the font size of the navigation so that I can fit in one more item?
May 3, 2012 at 22:27 #5867Bill RobbinsModeratorYou can change that. Go to the theme options page and select the the styling tab. Scroll down to the very bottom until you see the box labeled “Custom CSS.” Paste this into that box:
header .menu a, header .menu a:visited { font-size: 18px; }
and save your changes.
That will reduce the size of the menu items by 2 pixels. If you need more space, you can change the 18 in the snippet above to a smaller number.
If you have any trouble, just let me know,
BillMay 4, 2012 at 09:57 #5869rainbowsplashParticipantThank you and will try it today!!!
May 4, 2012 at 16:05 #5870rainbowsplashParticipantWorked like a charm. I lowered it even two more. Thanks!
July 30, 2012 at 12:48 #6948John RenockParticipantBill,
So far everything is working with your help and our tweaking. Thank you!
I cannot find a way to change the sizes of h1-h5 using Fontific, short of going to the code and again, not certain where the size changes need to be input. I tried editing the CSS, but not luck. With the font I have chosen, the smaller type is not quite legible enough and I would like to increase it.
Do the widgets pick up the font instructions from the css? And with your previously mentioned specificity, where specifically can I make these changes?
Thanks!
John
July 30, 2012 at 21:16 #6953Bill RobbinsModeratorJohn,
I’d be glad to help out. Any chance you can send over a link to where you’re working with the theme so I can take a closer look for you?
Thanks,
BillJuly 31, 2012 at 11:34 #6957RobynParticipantHi Bill,
me again! I pasted the above code to change the menu navigation size and updated/saved. The size is not changing.
Also, the link colors I am entering don’t seem to be updating to the site either.
Thanks in advance!
Robyn
July 31, 2012 at 15:42 #6958Bill RobbinsModeratorRobyn,
Any chance you could send a link to where you’re working on things so I can take a closer look for you?
Thanks,
BillJuly 31, 2012 at 19:25 #6961John RenockParticipantBill,
Here is the site
galionfirstlutheran.org/newsiteJohn
July 31, 2012 at 19:51 #6963Bill RobbinsModeratorJohn,
So sorry. Without the last name display I didn’t remember which John you were. Thanks for sending the link.
The widget titles use this selector:
h3.widget-title
So you’ll need to be that specific in order to make changes to them, especially the font size.
If you have trouble with any other headings, let me know which page you’re working on and which heading there and I’ll let you know there too.
Thanks,
BillAugust 1, 2012 at 07:18 #6965RobynParticipantAugust 2, 2012 at 11:10 #6973Bill RobbinsModeratorRobyn,
Thanks for the link. The site looks great by the way!
For the top navigation menu items, you can use this code snippet in the “Custom CSS” box to adjust the font size of the menu items:
li.button a { font-size: 20px; }
Just change the 20px to the pixel size you’d like to use.
You can also remove the drop shadow from the sub-menu elements with this:
li.button li a, li.button ul li.button { box-shadow: none !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; -o-box-shadow: none !imporant; }
If you run into any trouble or have any questions, just let me know,
BillAugust 11, 2012 at 08:33 #7081RobynParticipantI placed your code and changed the sizes. The Menu size and sub-menu nav drop shadow is not changing.
Is there a setting or box the check to allow custom CSS updates?
thx!
http://servantsofmary.org.previewdns.com/
This is what I have in the custom CSS box:
li.button a {
font-size: 12px;
}
li.button li a,
li.button ul li.button {
box-shadow: none !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
-o-box-shadow: none !imporant;
}August 11, 2012 at 15:19 #7085Bill RobbinsModeratorRobyn,
I think you found a bug. Here’s how to squash it:
- Go to the appearance section and select edit to open up the theme editor.
- From the list of files on your right, choose custom-css.php and look for this spot:
<?php if(of_get_option('custom_css', $single = true) != ""){ ?> <?php echo of_get_option('custom_css', '' ); ?> <?php } ?>
- Replace that with this:
- Save your changes.
That should let the Custom CSS take effect. If you have any trouble, let me know,
BillAugust 12, 2012 at 21:31 #7091RobynParticipantGREAT! Woo-Hoo! Thanks Bill!
January 2, 2013 at 13:59 #8757RobynParticipantHi Bill,
I’m just noticing the drop down nav type is still set at the original size. Is there additional code to have it match?
Thanks!
January 2, 2013 at 14:26 #8759Bill RobbinsModeratorRobyn,
For the drop-down, you’ll need a different snippet. Try this one:
header .menu li li a, header .menu li li a:visited { font-size: 14px; }
Let me know if you have trouble,
BillJanuary 3, 2013 at 11:00 #8769RobynParticipantYou are AMAZING! Thanks Bill!
-
AuthorPosts
- The topic ‘Lower Font Size of Navigation’ is closed to new replies.