I am looking to change the font size and weight of the navigation menu items on my WordPress site, I am using The Company theme, but I can't seem to figure out the CSS required
My site is www.thepowerwithin.org.uk
I am looking to make the items in the main menu at the top bigger and bold
I have reviewed your question. I think you want to apply CSS only on main-menu anchor text not on sub-menu anchor text. If I am right then you can do as:
ul.menu:not(.sub-menu) > li > a {
font-size: 16px;
font-weight: bold;
}
You should use children-selector > to apply CSS only on the direct children of ul
When use ul.menu:not(.sub-menu) it ignores sub-menu ul of li.
The best thing to do is learn how to use the developer tools in Firefox or Chrome or Safari or IE to see what's loading on your site and how to work with and change the CSS and HTML. Dev tools allows you to make temporary changes to the locally cached browser copy of the site. You can then add the CSS changes to the theme, either by adding new CSS in theme options or to the style sheet.
If the theme allows you to add custom CSS to modify the menu, that's good. If not, make a child theme so you don't lose your changes when the theme is updated. See Child Themes « WordPress Codex
Related
I've recently uploaded a custom font to my squarespace page (Bedford Template) and, as I'm applying it through the sit, am having a hard time with the nav bar.
For the items that are Links are the nav bar, I can change the font with:
#headerNav nav a {
font-family: 'Vitesse-Sans' !important;
}
But the items that are folders, not links, won't change. I can't find the code to change the folder text!
Here's our site: https://www.asapasap.org/
Thank you!
Scott
The solution is to use a very similar CSS rule, but to target the .folder-toggle class instead, like this:
#headerNav nav .folder-toggle {
font-family: 'Vitesse-Sans';
}
If you haven't already, consider familiarizing yourself with browser developer tools/web inspector (often opened with the F12 or CTRL+SHIFT+I keys). With it, you'd be able to explore the existing CSS rules applied to your site and experiment with the best ways to override them.
I Dont want this Span saying Taxes are included in the sale of this product, because this is an un-taxable product. My plan is just to change the color of text to hide it, but I cant seem to find the right area to change it.
Im using WordPress minimalist
Please follow the steps below to achieve what you want:
If you do not already have a child theme, create one with the name
YourThemeName-child in wp-content/themes. Replace YourThemeName
with the name of your theme.
Copy the CSS style from your main theme to your child theme.
Find the class of the element you want to hide by:
In Chrome: Right click on the element you want to hide and click on Inspect Element. From the console on the right, copy the CSS class of the element.
In your child theme CSS (the one that you copied from the main theme) add this code:
.element-class {
color: #ffffff;
}
/* Use !important if changes do not show. Refrain from using !important unless absolutely necessary */
Or if you want to not display it completely:
.element-class {
display: none;
}
/* Use !important if changes do not show. Refrain from using !important unless absolutely necessary */
To answer your question in the comments, yes, creating a new CSS file in child theme will override the main theme CSS.
Hope this helps.
I am trying to add Marathi font to header menus.I failed to see option in divi builder(wordpress).
there are options, but they are only for default font's.
whats the procedure to add custom font for header menu in divi builder?
I have done this several times and the solution I employ is to install the Use Any Font plugin. You will need an API key and you can get that for free from the download page. If you use the free version, you will only be able to import one font. That can be found here:
Once you have your plugin installed, the API key active, and your font imported, you will need to target the nav links using CSS, as the plugin doesn't allow you to directly target the nav anchors. So, to achieve this add the following to your custom CSS panel:
.et_header_style_left #et-top-navigation nav > ul > li > a, .et_header_style_split #et-top-navigation nav > ul > li > a {
font-family: Marathi, sans-serif;
}
Do you want to add custom fonts in WordPress? Custom fonts can help you freshen up your theme and stand out. In this article, we will show you how to add custom fonts in WordPress using Google Fonts, TypeKit, and CSS3 #Font-Face method.
Load font and create class in css and add that class inside menu item,
http://www.wpbeginner.com/wp-themes/how-to-add-custom-fonts-in-wordpress/
I am using the 2011 theme on wordpress and I would like to make the font that appears on the primary menu bigger and more stylish, is it possible for me to achieve this and if so, how to I go about it. sosytee.wordpress.com is the site i am working on and i would like to change the menu to a font similar to the orange letters in my banner as well as the size also
You can edit style.css file for this.
Please add child theme and edit the CSS file
Main menu:
#access ul {
font-size:20px; /* change it as per your need*/
}
Dropdown:
#access ul ul a { ... }
Firebug plugin for Firefox may help to inspect CSS style.
Creating a Wordpress-driven site for a client - http://www.2sleeptight.com
It looks OK in major browsers, except there are some serious problems in IE. Navigation will not display horizontally and the site title is the wrong color. There are 2 stylesheets, style.css (main style sheet) and custom.css (edits I have made to style.css)
The Wordpress theme even injects the title color style directly into the page header here:
#header .site-title a {font:bold 60px/1em 'Rancho', arial, sans-serif;color:#ffc600;}
But IE still picks up that grey color somewhere.
spogue, the problem is the order of your CSS. The values are being inherited by your other CSS files and because they are executed last they become the master.
Simply add this to the bottom of your CSS file.
.site-title a {color:#FFC600!important;}