Lower Font Size of Navigation

Support Area Forums Authentic Lower Font Size of Navigation

Viewing 18 posts - 1 through 18 (of 18 total)
URL to the page in question:
  • Author
    Posts
  • #5865
    rainbowsplash
    Participant

    Where can I lower the font size of the navigation so that I can fit in one more item?

    #5867
    Bill Robbins
    Moderator

    You 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,
    Bill

    #5869
    rainbowsplash
    Participant

    Thank you and will try it today!!!

    #5870
    rainbowsplash
    Participant

    Worked like a charm. I lowered it even two more. Thanks!

    #6948
    John Renock
    Participant

    Bill,

    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

    #6953
    Bill Robbins
    Moderator

    John,

    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,
    Bill

    #6957
    Robyn
    Participant

    Hi 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

    #6958
    Bill Robbins
    Moderator

    Robyn,

    Any chance you could send a link to where you’re working on things so I can take a closer look for you?

    Thanks,
    Bill

    #6961
    John Renock
    Participant

    Bill,
    Here is the site
    galionfirstlutheran.org/newsite

    John

    #6963
    Bill Robbins
    Moderator

    John,

    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,
    Bill

    #6965
    Robyn
    Participant

    Thanks for your help Bill!

    http://servantsofmary.org.previewdns.com/

    Robyn

    #6973
    Bill Robbins
    Moderator

    Robyn,

    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,
    Bill

    #7081
    Robyn
    Participant

    I 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;
    }

    #7085
    Bill Robbins
    Moderator

    Robyn,

    I think you found a bug. Here’s how to squash it:

    1. Go to the appearance section and select edit to open up the theme editor.
    2. 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 } ?>
      
    3. Replace that with this:
    4. Save your changes.

    That should let the Custom CSS take effect. If you have any trouble, let me know,
    Bill

    #7091
    Robyn
    Participant

    GREAT! Woo-Hoo! Thanks Bill!

    #8757
    Robyn
    Participant

    Hi 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!

    #8759
    Bill Robbins
    Moderator

    Robyn,

    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,
    Bill

    #8769
    Robyn
    Participant

    You are AMAZING! Thanks Bill!

Viewing 18 posts - 1 through 18 (of 18 total)
  • The topic ‘Lower Font Size of Navigation’ is closed to new replies.