yaneme on "[Theme: Opportune] Menu Bar"

ساخت وبلاگ

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 http://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.

WordPress ...
ما را در سایت WordPress دنبال می کنید

برچسب : نویسنده : استخدام کار wpss بازدید : 290 تاريخ : جمعه 1 مرداد 1395 ساعت: 14:55