Can't change font on Alves menu

  • Unknown's avatar
    porchlightcommunity · Member ·

    I’m using the Alves theme, it’s a child theme of Varia.

    The nav menu was originally in the header, but I moved it below.

    Now, I’m having issues changing the font size for the nav menu. When I change the font size, it increases the space above the letters, but not the size of the letters.

    Here is the HTML:
    <nav id=”site-navigation” class=”main-navigation” aria-label=”Main Navigation”>
    <input type=”checkbox” role=”button” aria-haspopup=”true” id=”toggle” class=”hide-visually”>
    <label for=”toggle” id=”toggle-menu” class=”button”>
    Menu <span class=”dropdown-icon open”>+</span>
    <span class=”dropdown-icon close”>×</span>
    <span class=”hide-visually expanded-text”>expanded</span>
    <span class=”hide-visually collapsed-text”>collapsed</span>
    </label>
    <div class=”menu-site-nav-container”><ul id=”menu-site-nav” class=”main-menu” aria-label=”submenu”><li id=”menu-item-65″ class=”menu-item menu-item-type-custom menu-item-object-custom menu-item-65″>Who We Are
    <li id=”menu-item-69″ class=”menu-item menu-item-type-custom menu-item-object-custom menu-item-69″>How It Works
    <li id=”menu-item-72″ class=”menu-item menu-item-type-custom menu-item-object-custom menu-item-72″>Sign Up
    <li id=”menu-item-73″ class=”menu-item menu-item-type-custom menu-item-object-custom menu-item-73″>Support Us
    <li id=”menu-item-74″ class=”menu-item menu-item-type-custom menu-item-object-custom menu-item-74″>Contact
    <li class=”donatenav” id=”menu-item-147″ class=”menu-item menu-item-type-post_type menu-item-object-give_forms menu-item-147″><button type=”button” id=”donatenow” style=”text-align:center;”>Donate</button>

    The blog I need help with is: (visible only to logged in users)

  • supernovia · Staff ·

    Hi @porchlightcommunity, the site you’ve linked seems to be using a different theme. Are you staging a new site here on our servers? If so can you send a link?

  • Unknown's avatar
    porchlightcommunity · Member ·

    Ah the site I need help with is: https://porchlightcommunity.org/test/.

  • kokkieh · Staff ·

    Hi there,

    The CSS from the theme you need to override is:

    body:not(.fse-enabled) .main-navigation a {
	font-size: 1.04167rem;
}

    Make sure you also remove the 

    #menu-item-69 {
	font-size: 5em;
}

    that I see in the browser inspector, or the font sizes will be all over the place :)

  • The topic ‘Can't change font on Alves menu’ is closed to new replies.