Preference Lite
[resolved] Font Size : menu (3 posts)

  1. tamararesi
    Posted 3 years ago #

    Good day!
    How to change the font size of the menu?

    My site is: http://www.tempodedialogo.com.br


  2. esmi
    Forum Moderator
    Posted 3 years ago #

    Do not edit the theme itself. First create a child theme for your changes. Or install a custom CSS plugin.

  3. Styled Themes
    Theme Author

    Posted 3 years ago #

    Just as esmi said, always use a child theme for core theme file modifications. My setup tutorials for this theme on my site has a premade child theme for you which you can download. Then to change the font size on menus, copy the css for the main menu from the style.css of the parent theme, Preference Lite from line 148 and paste it into the child theme's style.css file.

    /* Secondary wrappers */
    #nav-wrapper {
    	border-radius:60px 60px 0 0;
    	-webkit-border-radius: 60px 60px 0px 0px;
    	font:normal 14px open_sans, Arial, sans-serif;
    	font-size: 0.875rem;

    After you paste the above, simply remove what you don't need, so if it's just the font size, then your final css will look like this:

    /* Secondary wrappers */
    #nav-wrapper {
    	font:normal 14px open_sans, Arial, sans-serif;
    	font-size: 0.875rem;

    You will notice this theme uses two font sizes, one is px and the other is rem. Although I've changed this since my Encounters theme, this basically means for older browsers, use 14px, otherwise use the 0.875rem instead...which is a relative size to the body font size. REM is almost like em, but to help out to understand what the conversion is from px to rem (em), I use this online tool http://www.pxtoem.com ....you can of course use just px only if you are more comfortable with that, which you would remove the font-size: 0.875rem; line.

    Submenu sizes are found in the theme's /css/menu.css location. Just look for font-sizes like this around line 129 and looks like this:

    .main-navigation li ul li a {
    		display: block;
    		font-size: 12px;

    You would do the same, copy it to your child theme's style.css file and make the changes there.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic


No tags yet.