Unable to change menu font

  • I know this has been asked before and I have tried what those suggestions were, but things didn’t work or I’m just incapable of following directions. The main menu on my site is not using the font I want and I cannot get the CSS to change it. Specifically, I would like someone to show me the code to change the font used by the main menu.

    When the page initially loads, the font used by the menu looks… off. When I scroll down, the menu cleans up and the font looks like I want. I need to figure out why the font is different between the two and how to make the initial menu come up and look like it does when I scroll down. I know this is worded strangely, but looking at the site might make more sense.

    https://www.arkansaschildrensnutritioncenter.com

    Thanks for any help you can give.

Viewing 4 replies - 1 through 4 (of 4 total)

  • Do you mean that the first letter of of each page link is the wrong font size for the rest of the text?

    Thread Starter J Pierce

    (@j-pierce)

    Yes, the first letter is not what I would think it should be. I’m pretty much a bumbling idiot when it comes to doing web development of any form (this fell in my lap because I’m the “computer guy” in my department). In other words, type slowly and use little words to walk me through this.

    Thanks

    Hiya, I think what you want is the first letter to match the others when the menu is down, and when you scroll down the page and the menu goes up, you want the first letter to stay like it is. Is that the case?

    If it is, first make sure you have WordPress backed up https://codex.www.ads-software.com/WordPress_Backups

    Then go to your admin panel, mouse over “appearance”, and click on customize. This brings you to the WordPress customizer.

    The menu on the left side of the screen has a list of options and at the bottom is “Advanced options”, click on it. In the menu that shows up, click on “Custom CSS”. You’ll be shown a window that should have CSS rules on it, copy and paste those rules to a document for backup purposes. One of the lines in the window should say:

    .navbar .nav > li > a:first-letter {
    font-size: 17px;
    }

    If it does, put

    .sticky-enabled

    before the.navbar, so it looks like

    .sticky-enabled .navbar .nav > li > a:first-letter {
    font-size: 17px;
    }

    Mind the space between sticky-enabled and navbar.

    That being finished, at the bottom left-hand corner of the screen you’ll see a back arrow which looks like a backwards play button, click it to move the customizer out of the way, scroll up and down the page a few times to refresh the page. If you like the way it looks, click the back arrow again to bring back the menu, and click save and publish to save the changes. Then visit the site to make sure every thing’s working, if something looks wrong or off delete the added code, and save and publish to put it back where it was before.

    Hope this helps and solves your problem. ??

    PS:

    I have found out that in order to get this to display properly in Firefox you have to set the links to display as block level elements, so the code should look like this:

    .sticky-enabled .navbar .nav a{
    display: inline-block;

    }

    .sticky-enabled .navbar .nav > li > a::first-letter{
    font-size: 17px;

    }

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Unable to change menu font’ is closed to new replies.