Menu Bar

No worries…here to help.
Are you just wanting to change the font family (font) or other things too such as font size?

So glad to hear from you!
Maybe font size also, i noticed fonts look different even when it’s the same size. Now it’s also with capital letters

Typography is probably one of the more complicated to manage in any website as it involves so many elements that it can be overwhelming. Plugins can only do so much, but doing custom CSS is still probably the best way of handling it.

There are literally 10’s of 1000’s of fonts, but what makes a font seen on someone’s own screen is to make sure that font is already in their computer whether its MAC or Windows (part of the operating system). The other method to do this is that if a font is not available on a user’s computer is to load the font into their website, usually from the theme having some code built into it.

But, as I mentioned, I’m here to help, so let’s get started.

Is there a particular font you want to use or not sure at this point?

ok I understand what you are saying. There is a particular font i want to use, that is Poiret One, size 18 px.

Nice looking font actually and would go well for this theme.

First, we need to load that font which can be done by a Google font plugin or another option using CSS. You said you tried different plugins, but did you try Easy Google Fonts?

If you use the CSS method, there are a couple things that need to be done…If you are not using Jetpack (which has an Edit CSS feature), then install a plugin called Simple Custom CSS. This will let you add custom CSS code without digging into the theme. So for example, the font you want to use would be added to your custom CSS like this:

@import url(https://fonts.googleapis.com/css?family=Poiret+One);

Then, to change the menu font to use that, your next custom css would be this:

.site-navigation {
   font-family: "Poiret One";
}

I know you said you want it to be a size of 18px, but it’s recommended to not use the “px” value because anyone who might need to increase text size in their browser to see better, needs the font size to be “relative”. So I would recommend “rem” or %

For rem, your menu size would then be added like this:

.primary-navigation {
   font-size: 1.125rem;
}

You can convert a px size to rem with this online tool https://www.pxtoem.com

I doubt you want your submenus (if any) to be 18px, so I would then follow up with adding this right after:

@media (min-width: 992px) {
.primary-navigation li li > a {
    font-size: 0.938rem;
}
}

Also, if you do not want your menu to be all uppercase, then you would add:

.primary-navigation {
    text-transform: none;
}

Now, if you combine all of this in your custom CSS stylesheet, it will look like this:

.site-navigation {
   font-family: "Poiret One";
}
.primary-navigation {
   font-size: 1.125rem;
}
.primary-navigation {
    text-transform: none;
}
@media (min-width: 992px) {
.primary-navigation li li > a {
    font-size: 0.938rem;
}
}

You can actually make that shorter by doing this instead:

.primary-navigation {
   font-family: "Poiret One";
   font-size: 1.125rem;
    text-transform: none;
}
@media (min-width: 992px) {
.primary-navigation li li > a {
    font-size: 0.938rem;
}
}

The .primary-navigation is the class of the container your menu is in. So it will apply the new font to your menu as “Poiret One”. Then, to change the font size, it will make your menu links as 1.125rem (18px). Your submenu will be a bit smaller using 0.938rem which is 15px. Then, to remove the uppercase letters (the capital letters), the text-transform does that.

Thank you so much for the elaborate guide, i have done as you mentioned, installed Easy Google Fonts and Simple Custom CSS, and copy-pasted the codes in the CSS Stylesheet the longer version and also the shorter one, and nothing happened. The menu is still the same…

do you have a link to your site?

yes I have, the site is under construction now, but i can take that off when you want to see it. the site is https://lepivoine.ro/

It’s late for me right now…1130pm, but if you can unlock it for a few minutes, I can check the site out. Right now it’s got the Under Construction page up. I will wait over the next 30 minutes before I call it a night.

thank you so much, i’ll take it out right now

Ah, you’re using a child theme. I did not know that. The custom CSS above….add it to your child theme style.css then instead of the plugin Simple Custom CSS.

That should work.

Add it by going to Appearance >> Editor
Then, make sure the child theme’s stylesheet (style.css) file is open and you can paste the code in that file.

yes, i am using a child theme, so i’ll just add the code you wrote above, hope it will work! thank you for staying out late for me!

it almost worked! only that the menu is all uppercase, the font is changed, is Poiret one. I have also added the line for not-uppercase, but it is still

Try this:

.primary-navigation li {
   text-transform: none;
}

yes I did, and it still uppercase. I also have a submenu, under Orders, and that one is without uppercase. But i noticed it was like that before i entered the code.