Custom CSS for Menu font and size

Can you help me with the correct Custom CSS code to change the font and font size for the menu items? The font I want to use is Palatino, which I believe is the same font I have in my revolution slider on the second slide with the verbiage "What can you do with"

I also want to use the same font for the pull down list items

I will open the support access to the site so you can look at the slider if necessary.

Thanks!!!

  • Adam Czajczyk

    Hello @EricGiauque,

    I hope you're well today and thank you for your question!

    The font used on a second slider indeed seems to be set to a Palatino Linotype. In order to set it for your main menu items (and also set the font size for these items at the same time), please add this CSS code to your "Appearance -> Custom CSS" box:

    #menu-main .menu-item a {font-family:"Palatino Linotype","Book Antiqua",Palatino,serif;font-size:15px;}

    Make sure that you've replaced the "15px" value with the size (in pixels) that makes you menu look as expected on your site. You may wan't to experiment with that value a bit :slight_smile:

    As for sub-menu items. I remember sharing a code to change font size for sub-menu items on your page here:

    https://premium.wpmudev.org/forums/topic/how-do-i-change-the-font-size-of-a-sub-menu#post-1003026

    The code I suggested was:

    .sub-menu li a {font-size:20px!important;}

    It was added via "Appearance -> Custom CSS" box as well so in order to change sub-menu font just replace that code with following one:

    .sub-menu li a {font-size:20px!important;font-family:"Palatino Linotype","Book Antiqua",Palatino,serif;}

    Again, you may want to adjust "font-size" pixel value to suit your site's design.

    Best regards,
    Adam

  • EricGiauque

    Hi Adam,
    Thanks for your great support here. I added this code to "Appearance -> Custom CSS" and did not see any change, but I think I may know the reason, at least partially.

    I do see that there is a separate location for Custom CSS under "Appearance -> Theme Options" where is also a tab called Custom CSS. I remember now that I got some support from the theme author to add the follow snippets of code:

    #top-header {
    font-size: 14px;
    }

    #nav-menu {
    font-size: 20px;
    }

    I also tried to add your suggested CSS code in this same location, but nothing happened.

    Will I need to get this support from the theme author?

    Thanks!!

  • Adam Czajczyk

    Hello EricGiauque!

    I've accessed your site's dashboard once again and I can see that the code I suggested was added via "Appearance -> Custom CSS" box. That's perfectly fine.

    That said, please remember to Flush Cache after each change made in "Appearance -> Custom CSS" box.

    To do this, just click on "Flush Cache" link in your admin toolbar (see screenshot) and wait for the "Cache cleared" system message to appear.

    I did that for you and it looks like changes where applied to the page.

    Best regards,
    Adam

  • Adam Czajczyk

    Hello EricGiauque!

    In "Appearance -> Custom CSS" box the "font-size" value was originally set by you to 5px and during my recent visit to your site's dashboard I didn't change it. I can see now that you set it to 25px. The site's cache was cleared again and I can see that the font is huge in main menu.

    My advice on this would be:

    As I said before: always remember to flush cache (see here) and to clear your browser's cache (see here) after making changes and before checking your site.

    It's also good to check front-page in another browser as a logged-out user.

    Best regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.