Editing Menu Font Size

  • Resolved charliehanger

    (@charliehanger)


    3 years, 10 months ago

    I’m new to CSS variables. I just want to make the main menu font size a bit smaller. Any guidance would be much appreciated!

    In the css, the font size for the primary nav is set to medium:
    –primary-nav–font-size: var(–global–font-size-md);

    I figured that changing that “md” to “sm” would bring the font size down to 1.125rem, so I added this to the CSS customizer:
    :root {
    –primary-nav–font-size: var(–global–font-size-sm);
    }

    But nothing changed. I also tried the other variations (xs, xl, xxl, etc.), but nothing made a difference.

    • This topic was modified 3 years, 10 months ago by charliehanger.
Viewing 6 replies - 1 through 6 (of 6 total)

  • Hi charliehanger,

    I tried the following in the additional CSS and it works.

    :root {
    –primary-nav–font-size: 30px;
    }

    Do you have the exact spelling. In your message, you have one dash instead of two in your variable names.

    Hope this helps
    Etienne R

    Thread Starter charliehanger

    (@charliehanger)

    Thanks @etienne-r-2! I was copying and pasting the from the style.css file, so I’m pretty sure I have the dashes correct. Here’s what I have again: 

    :root {
	--primary-nav--font-size: var(--global--font-size-xs);
	}

    Strangely, the 30px option didn’t work for me either, but I’m hoping to stick with the CSS variables anyway.

    CSS var() is not supported by older browsers (see browser support here) and the theme detects IE11 and provides a completely different stylesheet without variables in order to be compatible.

    For this reason I would probably avoid using css variables in your custom CSS.

    Oliver

    Dear @charliehanger,
    Your code looks good, it is exactlty what I would have done. It works fine both with a child theme and with the native Twenty twenty One.
    Do you have the same problem on a mobile screen ? Did you look at the
    --primary-nav--font-size-mobile:
    May you could tell us the URL of the website you work on.

    Best
    Etienne R

    Thread Starter charliehanger

    (@charliehanger)

    Thanks @etienne-r-2 and @domainsupport. I figured out my issue. I had just dropped a } in the code above, so WP wasn’t reading my changes. Sorry for the runaround!

    You’re welcome

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Editing Menu Font Size’ is closed to new replies.